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/AVvXsEgY950bqWCFrkPWFb92BPIiTFOJXGA-TJ3ikAI2W7jrUzSjl6SoaFScSaWybMBg6n-pvSGGTQkrzpRcQfgnJhLy2CWDyOWbvX8hRgvprXh79A-sx70_5QFWBSlC7NUgU_9SYjd5WZ_xyZgj/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>

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; display:block; 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