Cargar los videos de YouTube sólo cuando el usuario quiera verlos

¿Sabías que insertar un video de YouTube hace que tu blog pese por lo menos 400 kB más? Esto es porque el iframe de YouTube tiene que descargar imágenes, scripts, estilos CSS, y hacer múltiples peticiones para que el reproductor y el video se muestren correctamente, aun cuando el usuario ni siquiera esté interesado en ver dicho video.
Ahora imagínate un usuario con Internet Explorer visitando un blog de videos: una combinación fatal.

Google+ sabía esto, y también sabía que en su red social habría mucha inserción de videos que podrían perjudicar la velocidad de carga de su página, pero lo resolvieron de una manera muy sencilla. La solución: que el iframe del video sólo se cargue cuando el usuario dé click en él. De esa forma evitamos que el video se cargue innecesariamente y consuma recursos que no requiere.

El sistema es muy simple en realidad, lo que hace el script que veremos a continuación es mostrar sólo la miniatura del video, y al darle click a la imagen ésta desaparecerá y entonces se cargará el iframe que contiene el video. Puedes verlo con el elemento que está a continuación, es una imagen que al darle click cargará el video.

Para implementar este sistema de carga de video en tu blog, entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:

<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/AVvXsEhFOFLCridoafnWwIFMVTQGoMN50nFqkjhWemqxzRFzDvn0mN-JUYJKlRLYYgOY7sQQ0FNrMFR9geDUlBuQlMryOlOi-I63bdUmksSfWztzUMtLflFHxh3kNmaA1bGeJDmSzGPcvHMAhMCw/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&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>

Y ahora, cada vez que quieras insertar un video en tu blog, ya sea en una entrada, o en un gadget, usa este código:

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

Lo que está en negrita es el ancho y alto del video, lo puedes modificar al tamaño que quieras.
Lo que está en color rojo es donde deberás poner el ID del video.

¿Cuál es el ID del video?
Cuando abres un video de YouTube verás en la barra de direcciones una URL, los últimos caracteres son el ID del video.

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

Dentro del primer código verás una URL en color verde, esa es la imagen de play, la puedes cambiar por otra si lo deseas, procurando que la imagen mida 77x77 pixeles.


Como puedes ver, es un sistema práctico y funcional para optimizar la velocidad de carga del blog, algo que tanto los robots de los buscadores y tus lectores agradecerán, pues los videos no se cargarán a menos que el usuario quiera verlos.

Vía | Labnol Imprimir artículo