Blogger Book

Sapevi che incorporare un video di YouTube aggiunge almeno 400 kB alle dimensioni del tuo blog? Questo perché l'iframe di YouTube deve scaricare immagini, script, stili CSS ed effettuare più richieste per garantire che il player e il video vengano visualizzati correttamente, anche se l'utente non è interessato a guardare il video.
Ora immagina un utente con Internet Explorer che visita un videoblog: una ricetta per il disastro.

Google+ lo sapeva, e sapeva anche che il suo social network avrebbe avuto molti video incorporati che avrebbero potuto influire negativamente sulla velocità di caricamento delle pagine, ma ha risolto il problema in modo molto semplice. La soluzione: l'iframe del video si carica solo quando l'utente ci clicca sopra. Questo impedisce che il video si carichi inutilmente e consumi risorse non necessarie.
Il sistema è in realtà molto semplice. Lo script che vedremo di seguito mostra solo la miniatura del video e, quando l'utente clicca sull'immagine, la miniatura scompare e viene caricato l'iframe contenente il video. Potete vederlo nell'elemento qui sotto; è un'immagine che, quando cliccata, carica il video.

Per implementare questo sistema di caricamento video sul tuo blog, vai su Modello | Modifica HTML e incolla quanto segue prima di </body> :

<script>
//<![CDATA[
// iFrame di YouTube
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( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ofn60TvnW1Rwu6gdH1mUD-Q_PTlH5Nyz3edKywoB5B-W3_ 05ESaknZOwRrOk-ze0oRuyfIDTwpdp2yat0CQaGJ16RR0NSJOGoqDdVAWbIkmm0RRMozWByDev1yK2ZX15zyMc74MlJGOn/s77/play.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+"/hqdefa ult.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&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.sty le.width;a.style.height=this.style.height;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
//]]>
</script>

E ora, ogni volta che vuoi inserire un video nel tuo blog, sia in un post che in un gadget, usa questo codice:

<div class="youtube" id=" XXXXXXXX " style=" width:560px; height:315px; margin:0 auto; display:block; border:none"></div>

Il testo in grassetto mostra la larghezza e l'altezza del video; puoi regolarlo a piacere.
Il testo in rosso è dove inserisci l'ID del video.
Cos'è l'ID del video?
Quando apri un video di YouTube, vedrai un URL nella barra degli indirizzi; gli ultimi caratteri sono l'ID del video.

https://www.youtube.com/watch?v= GfxAEl15pDs

Nel primo frammento di codice, vedrai un URL verde : è l' immagine del pulsante di riproduzione . Puoi modificarla se vuoi, assicurandoti che l'immagine sia di 77x77 pixel.
Come puoi vedere, è un sistema pratico e funzionale per ottimizzare la velocità di caricamento del blog , qualcosa che sia i crawler dei motori di ricerca che i tuoi lettori apprezzeranno, poiché i video non si caricheranno a meno che l'utente non voglia guardarli .

fonte