Caricare i video di Youtube solo quando si riproducono e mostrare il player della giusta dimensione negli smartphone.

Come caricare i video di Youtube solo quando il lettore vuole visualizzarli e come mostrare la miniatura del video nei dispositivi mobili in modo da preservare le dimensioni del layout.

A seguito di un commento ricevuto sul player di Youtube che viene mostrato di dimensioni eccessive oppure che non si vede per nulla nei blog di Blogger quando si aprono con dispositivi mobili, ho cercato di trovare una qualche soluzione al problema. Sembra che esista un bug di Blogger che nel momento in cui ci sia un post che contenga un player di un video di Youtube questo si visualizzi molto grande da cellulare tanto da sfalsare tutto il layout indipendentemente dalle dimensioni che si sono settate.

Gli amministratori di blog su Blogger oltre a questo disservizio con i dispositivi mobili devono fare i conti anche con l'eccessiva lentezza dell'apertura del post quando vi siano postati dei video di Youtube. Questo indipendentemente se il lettore lo visualizzi o meno. Tramite l'iframe di Youtube vengono infatti caricati immagini, script e fogli di stile. Nel caso in cui in un articolo ci siano più video la velocità di caricamento della pagina sarà ancora più compressa. Se poi il video viene inserito in Homepage anche senza autoplay ne risentirà la velocità di navigazione di tutto il sito.

Vediamo come si possa mostrare nel post solo la miniatura del video in modo da caricarlo solo nel caso in cui il lettore deciderà effettivamente di visualizzarlo.

Questo risolve il problema della lentezza del caricamento della pagina ma incide solo parzialmente sui video aperti tramite dispositivo mobile. Si visualizzati infatti in modo corretto la miniatura del video ma se il lettore ci cliccherà sopra il player diventerà grande. Sarà comunque un miglioramento della situazione visto che il layout non ne soffrirà e il video potrà comunque essere visto a tutto schermo

Per avere una migliore visualizzazione da cellulare è opportuno optare per la Personalizzato in Modello > Visualizza da dispositivo mobile. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga di codice </body>. Subito sopra si incolla questo codice

<!-- Video di Youtube Inizio -->
<script>
//<![CDATA[
var i,c,y,v,s,n;v=document.getElementsByClassName("youtube");if(v.length>0){s=document.createElement("style");s.type="text/css";s.innerHTML='.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-ejLQ-H2lKy8/Uz5vQV16JNI/AAAAAAAAmhM/n-TmcgWjNdE/s78/play11.png) no-repeat}';document.body.appendChild(s)}for(n=0;n<v.length;n++){y=v[n];i=document.createElement("img");i.setAttribute("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg");i.setAttribute("class","ythumb");c=document.createElement("div");c.setAttribute("class","play");y.appendChild(i);y.appendChild(c);y.onclick=function(){var a=document.createElement("iframe");a.setAttribute("src","https://www.youtube.com/embed/"+this.id+"?autoplay=1&rel=0&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.style.width;a.style.height=this.style.height;a.style.border=this.style.border;this.parentNode.replaceChild(a,this)}};
//]]>
</script>
<!-- Video di Youtube Fine -->

Si salva il modello. Si può modificare l'icona del pulsante Play mostrata al centro della miniatura. Ho scelto tre opzioni ma ovviamente se ne può mettere anche una quarta

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37Z1ZeMbuBvBrMED4LKTTMqn9KO_bTITZoyhuTGhqNYtuxP6rPNJGtJ4ij70EELwtBsiAW8WTuO1tDbtm81rX0vke72UNjtpRc7KLxryxKZ-0BRiHXmu9DXoGGsoaW6e7jCAFssYw2QAj/s78/play11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGV_FiHi1FeNf821kvMaAJxAaMw9rJlJR0n4THd2oBXvwp2zkydMTTk8VEbDt8CnLF9HTkkU6mTGnMKXegao9T21E2AhYMtl51i6MCgUsnrLArxcBXrPfWBuetPivCeN-fVtpz6Qy2a08/s78/play21.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqdKZ_qiMuxAatqFn8G0G44cbtw4fkkzzALHsAD2Hnko4IjvlUrRoSAGu3vbTY5lOpduYhK5YFkYJtuxtARvySJPmMvKTJMYVjTy_wgIgm6gOP8DtXxUdSi4ByHG3oHcT5pblPCx1ePjc/s78/play31.png

Tutte le volte che si posta un video di Youtube dovremo trovarne l'ID dall'indirizzo del browser

Si tratta della stringa alfanumerica dopo v=. Per pubblicare un video nel post dobbiamo andare su HTML e incollare il seguente codice

<div align="center">
<div class="youtube" id="yymd-GmyB-s" style="border: none; height: 315px; margin: 0 auto; width: 560px;">
</div>
</div>

dove center serve per centrare il video e la stringa colorata di viola è il suo ID. Si possono settare anche le dimensioni del player, quelle proposte sono relative a un video 16:9.

Fonti | Digital Inspiration - Ciudad Blogger