Pubblicato il 17/11/13e aggiornato il

Inserire un video di Youtube come sfondo su Blogger.

Come utilizzare un video di Youtube come sfondo per il nostro blog su Blogger. È anche possibile riprodurre l'audio.
Attraverso il Designer Modelli è possibile scegliere una immagine di sfondo per il nostro blog su Blogger selezionandola tra quelle disponibili oppure caricandola direttamente dal computer. Sono sicuro che qualcuno di voi ha pensato invece di usare come background un video che ovviamente non copra i contenuti del sito ma che si visualizzi solo nello sfondo.

Questa opzione è consigliabile solo per chi abbia scelto un modello con sfondo trasparente perché altrimenti non si riuscirebbe a visualizzare bene tutto il video. Per rendere trasparente il layout di un blog, dopo aver salvato il template, si va su Modello > Personalizza > Avanzato > Sfondi e si inserisce transparent al posto dei due codici di colori rispettivamente per Sfondo Esterno e Sfondo Principale (opzionalmente anche per Sfondo Intestazione). Si deve andare quindi su Applica al blog in alto a destra. A proposito di video come background, Sean McCambridge ha messo a punto un plugin realizzato con JQuery per mettere appunto un video di Youtube come sfondo del blog. Sono presenti informazioni aggiuntive a quelle che vi darò su Tubular che è il sito in cui si può scaricare il codice sorgente del plugin e consultare tutte le varie opzioni e le impostazioni di default.

Per un blog su Blogger dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head> pigiando su Ctrl+F. Subito sopra si incolla questo codice

<!-- Youtube Background -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */

var videoWidth = 900;
var videoRatio = 4/3;
var defaultDiv = 'wrapper-video';
jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);
jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;
var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';
jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}
//]]>
</script> <script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('ab0TSkLe-E0','wrapper-video');
});
//]]>
</script>

Si cerca ora la riga

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

oppure solo <body> nei vecchi modelli. Subito sotto si incolla la riga

<div id='wrapper-video'>

Cerchiamo adesso il tag </body> e, subito sopra incolliamo il tag di chiusura
</div>
della riga precedente. Finalmente salviamo il modello.

video-youtube-sfondo-blogger

Si può settare la larghezza del video, il layout 4/3 o 16/9 ma soprattutto va immesso l'ID del video che si desume dal suo URL su Youtube. È quella stringa alfanumerica dopo ?v=. L'ID del video di test inserito nel codice è quello di New Zeland Nature Landscapes. Come scritto all'inizio del post possono essere inserite altre personalizzazioni e anche una sorta di Pannello di Controllo in cui il lettore possa aumentare o diminuire il volume oppure escluderlo del tutto.




10 commenti :

  1. ma sai che questa non la sapevo?? carinissimo effetto!!
    ciao buona giornata :)

    RispondiElimina
  2. io ho fatto tutti i passi...ma è tutto come prima ...nel senso htlm modificato ecc ecc ....inserito l'id video ...ma è come se non avessi fatto nulla...cmq non demordo e riprovo .....

    RispondiElimina
  3. Prova con questo ID video prima di modificarlo. Potresti aver scelto un video protetto da copyright
    @#

    RispondiElimina
  4. Ciao, anche io ho approfondito con un tutorial come utilizzare Tubular: http://www.mattiafrigeri.it/articoli/web/inserire-video-come-sfondo-di-un-sito-con-il-plugin-jquery-tubular/
    Spero possa esservi d'aiuto! Buon lavoro!

    RispondiElimina
  5. Bellissima questa personalizzazione di blogger.
    Tuttavia mi chiedo se si possa personalizzare creando un sistema a scelta del lettore per rimuovere l'audio (in modo che non si sovrapponga a quello di altri video mostrati nel blog) o far eseguire il video una sola volta, impedendo la continua riesecuzione del video.

    PS: non funzia con i dynamic layer... e vabbè sono già pesanti per i fatti loro.

    RispondiElimina
    Risposte
    1. Ho riportato il lavoro di un sito che ho linkato nel post e non mi sono addentrato oltre :(
      @#

      Elimina
    2. Caspita che veloce a rispondere. Comunque anch'io non ho conoscenze di script web così avanzate, anche perchè ho fatto altri studi. Tuttavia così a naso direi però che se si vuole fermare la ripetizione continua del video forse basta mettere loop=1 -> loop=0.
      Per l'audio invece ci vorrebbe uno oggetto da porre nella pagina web (creato con flash o java) che interagisca con il database da dove viene la jquery che reindirizza il video youtube, e capire come influenzare il bottone dell'audio. Piuttosto difficile. Oppure dove mette il wmode=transparent mettere qualcosa che faccia vedere il player youtube, ivi compreso il pulsante dell'audio. Però a quel punto si perde l'illusione/magia dello sfondo animato. Per caso hai fatto anche un post sui jquery file uploader? ci sto facendo un pensierino per usarli su qualche sito blogger & wordpress... (vedi: http://codegeekz.com/best-jquery-file-upload-plugins/)

      Elimina
    3. tipo: blueimp/jQuery-File-Upload

      http://www.htmlgoodies.com/html5/other/using-html5-and-the-blueimp-jquery-file-upload-plugin-to-upload-large-files.html#fbid=Cn5l5-8yfAJ

      devo fare qualche prova, anche perchè non si capisce poi il proprietario del blog dove vede i file per scaricarli o cancellarli.
      Di conseguenza le limitazioni per spazio e dim.max upload.

      Elimina
    4. Ho usato molte volte JQuery ma solo per introdurre animazioni nei widget
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.