Embeber video de YouTube eficientemente

Embeber un video de YouTube tradicionalmente puede llegar a consumir demasiado tiempo de carga. Hay que tener en cuenta que hay más archivos por cargar en nuestra web (CSS, Javascript, imágenes…).

En una simple prueba donde únicamente hay un video en un iframe en HTML5, sin nada más, podemos observar, según el network de Google Chrome: 20 peticiones, 594 KB transferidos, finalizado en 2.05 s.

Ay, Berto, qué majo eres.

En esa web el código que hay es el siguiente:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe width="560" height="349" src="https://www.youtube.com/embed/uvqx3IIyzJ8" frameborder="0" allowfullscreen></iframe>
</body>
</html>

También podemos observar en la imagen que hay varios errores al intentar obtener “cast_sender.js”, pero por lo visto es un problema del código de YouTube.

¿Cómo reducir la carga del video embebido?

Con el siguiente código obtendremos, aproximadamente*, este resultado: 3 peticiones, 25.1 KB transferidos, finalizado en 708 ms.
Absolutamente nada comparado con los números anteriores: 20 peticiones, 594 KB transferidos, finalizado en 2.05 s.

*Puede llegar a variar según la longitud y la calidad del video.

CSS:

<style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* Asumiendo que el video es 16:9 */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url('XXX') no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>

En “background url()” XXX es donde se pondría el botón de play.
Por ejemplo: http://i.imgur.com/TxzC70f.png

HTML:

<div class="youtube-container"><div class="youtube-player" data-id="ID_DEL_VIDEO"></div></div>

En mi caso, “ID_DEL_VIDEO” es uvqx3IIyzJ8.

JAVASCRIPT:

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {         var p = document.createElement("div");         p.innerHTML = labnolThumb(v[n].dataset.id);         p.onclick = labnolIframe;         v[n].appendChild(p);     } })();   function labnolThumb(id) {     return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

En este código básicamente obtenemos la miniatura de máxima calidad (hqdefault.jpg) del CDN de YouTube (i.ytimg.com) sacando el “data-id” desde HTML5.

Y listo.

Conclusión:

Este método es especialmente importante si tenemos en cuenta la cantidad de peticiones que reduce si es que por algún motivo nuestro(s) visitante(s) no va(n) a ver el video.

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!

2 comments

  1. Alejandro · febrero 4

    Hola!!! Muy bueno el articulo, es el primero que encuentro que enseña a reducir la carga de youtube, he tenido muchos problemas con ello. Soy novato en esto, por eso te consulto lo siguiente.

    El código CSS que dejas, tendría que agregarlo en algun archivo separado? Tendría que agregarlo en el archivo CSS de la plantilla principal?? Como debería hacerlo? Tengo Joomla 3.4.8

    Muchísimas gracias!

    Me gusta

    • Rocanrol · febrero 4

      Hola, Alejandro. Me alegra que te haya sido útil este tutorial🙂

      Sí, lo mejor sería poner el CSS en el archivo .css principal que te provea Joomla.

      Saludos.

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s