El mejor método para embeber vídeos de YouTube en tu web

Es fácil insertar un vídeo de YouTube en tu web, y eso es bien, lo que no es bien es la carga extra que el susodicho vídeo de YouTube embebido añade a tus páginas web. El navegador tiene que descargar alrededor de medio Mb de archivos adicionales de JavaScript para solo poder ejecutar el reproductor del vídeo de YouTube. Y esos archivos se descargan incluso si el visitante nunca reproduce el vídeo embebido. Una auténtica barbaridad.

El vídeo embebido no sólo aumenta el tamaño en bytes de tus páginas web, el navegador también tiene que hacer múltiples peticiones HTTP para ejecutar el reproductor del vídeo. Esto aumenta el tiempo total de carga de la página, lo que afecta directamente en la puntuación de la velocidad de la página, lógicamente. Otro inconveniente del código de inserción por defecto de YouTube es que no es responsive. Si la gente ve tu sitio web desde un teléfono móvil, el reproductor del vídeo no cambiará de tamaño para adecuarse a las proporciones del dispositivo.

Insertar vídeos de YouTube sin aumentar el tamaño de la página

Google utiliza una técnica inteligente para insertar vídeos de YouTube: solamente embebe la imagen de la miniatura del vídeo de YouTube en cuestión, y el reproductor del vídeo real se carga sólo cuando el usuario hace clic en la imagen manualmente.

Las imagenes de miniatura de los vídeos de YouTube pesan alrededor de 15 kb por lo que seremos capaces de reducir el tamaño en bytes de nuestras páginas web en más de 500 kb. ¡Una auténtica locura!

Cuando un usuario hace clic en el botón de reproducción, la imagen en miniatura se sustituye por el reproductor del vídeo de YouTube estándar, con el sistema de reproducción automático a 1 por lo que se reproduce el video al instante. La ventaja es que el extra de Javascript otorgado por YouTube solo se carga cuando alguien decide ver el vídeo embebido y no de otra manera.

Ligero y responsive

El código de inserción estándar de YouTube utiliza la etiqueta IFRAME y la anchura y la altura del reproductor de vídeo no son modificables, por lo tanto hacen que el reproduce no sea responsive.

El nuevo código de inserción de YouTube es un poco diferente. No es necesario especificar el tamaño del reproductor tal y como se hace ahora, ya que el nuevo reproductor de vídeo es totalmente responsive. Además, el IFRAME se sustituye con una etiqueta DIV y se añade el IFRAME a la página sólo cuando el usuario haga clic al botón de reproducción.

Este sería el código estándar de Youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/0GvLP2C2w9U" frameborder="0" allowfullscreen></iframe>

Este sería el nuevo código ligero y responsive

<div class="youtube-player" data-id="0GvLP2C2w9U"></div>

Cómo embeber vídeos de YouTube con este nuevo método

Copia y pega el siguiente snippet donde quieras que aparezca el vídeo en tu página web. Recuerda reemplazar la palabra VIDEO_ID por el ID del vídeo que quieras insertar en la página.

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

Ni le asignamos altura, ni le asignamos anchura, el propio reproductor del vídeo ocupará automáticamente el ancho de su contenedor padre, mientras que la altura se calculará automáticamente. Puedes pegar varios bloques DIV con diferentes identificadores de video si necesitas embeber varios vídeos en una misma página.

A continuación, coloca el siguiente código JavaScript en cualquier parte de tsu diseño web. Buscará todos los vídeos embebidos en tu página web y reemplazará los elementos DIV con la miniatura del vídeo correspondiente.

<script>

document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});

function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}

function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}

</script>

Finalmente, pega el CSS antes de cerrar el tag head de tu plantilla HTML.

Este método reducirá el tamaño de tus páginas web en 500 KB y no estropeará tus diseños responsive.

position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}

.youtube-player img:hover {
    -webkit-filter: brightness(75%);
}

.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("//i.imgur.com/TxzC70f.png") no-repeat;
    cursor: pointer;
}

Fuente: labnol.org

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP