Cargar videos cuando el usuario lo desee

En este tutorial, les voy a dejar un script para hacer que los videos de YouTube, solo carguen cuando el usuario lo desee, este script, para mi es muy importante, ya que si tienes un blog con muchos videos, este tardara mucho en cargar, esot es porque estara descargando los iframes de los videos de manera externa, el blog sin el script podria pesar hasta 1MB mas si carga 3 solo tres videos, y como no todos los usuarios tienen una buena conexion a internet, se les tardaria una eternidad en cargar, por eso es que les comparto este script de Labnol que sirve para que los videos solo carguen cuando el usuario lo quiere ver, pero no se quita el video, en su lugar sale la imagen que saldria en el video, y el iframe se descargara al hacer clic en la imagen, empezemos.

Primero, como siempre se vana  Blogger - Su Blog - Plantilla -Editar HTML, ahi buscan:

</body>

Y justo arriba de esa line, agregan el siguiente codigo javascript:

 <script>
//<![CDATA[
// YouTube iFrames
 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/AVvXsEhqdaFGnwC_uYq3mwPN6tc2YNe3j_RkdJE_h2lA5mYtEXb6plQqAJyKDm6aC1jR88e4ksBlO26DDVhiUa6Q0dPxFca0gwI531o1HfOaUVHhoBOnGkqwh9IHwo3TYYubrJfFmVLLppi9IR9d/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+"/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&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.style.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>

Ya tienen el script, ahora para agregar el video solo tienen que agregar el siguiente codigo en cualquier parte del blog:

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

 Ahi ya tienen el codigo del video, ahora lo que esta marcado en color verde lo cambian por el id del video, y loque esta en color rojo es el tmaño, lo cambian por el tamaño que quieran, para saber el id del video, solo tienen que irse al video, y el id estara despues de ?v= lo que sigue es el id:


Y solo copian eso, y lo pegan al codigo que anteriormente les deje, y ya esta ya tendram el video, pero no descargado hasta que el usuario haga clic en el.
DEMO: