Cómo configurar correctamente la "carga diferida" de un video incrustado de YouTube

En caso de que aún no lo hayas notado y solo estés insertando cualquier video útil de youtube que encuentres en una sola página del sitio web, insertando un solo video de youtube, por ejemplo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/2knO_yUy2hE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Agrega automáticamente un tamaño adicional de 272 KB a tu página. Esto en sí mismo no es una cantidad insignificante considerando que el tamaño ideal de una página de carga rápida es de 1 MB (1024 KB). Si estás buscando una forma de optimizar tus páginas web que contienen videos incrustados de YouTube, definitivamente necesitas cargarlos de manera perezosa.

En este artículo, te mostraremos 2 enfoques que resolverán tu problema.

A. LazyLoading con la API IntersectionObserver

Para comprender lo que vamos a hacer en este enfoque con la API IntersectionObserver, considera el siguiente ejemplo de una página web desplazable verticalmente que contiene un solo video de YouTube:

En este caso, si insertas el video como lo harías tradicionalmente con el marcado, el iframe de YouTube agregaría inmediatamente 272KB al tamaño de tu página, aunque el video no sea visible para el usuario en la ventana gráfica. En términos de optimización, esto es realmente terrible. Entonces, la solución, para eliminar esos 272 KB que aún no se necesitan, sería cargarlos solo cuando esté visible en la ventana gráfica (usando LazyLoad no se cargaría inmediatamente):

Solo se cargaría cuando el contenedor de video esté dentro de la ventana gráfica, cargando los 272 KB que el usuario ahora vería:

En este artículo, voy a explicarte cómo cargar de manera óptima un video de YouTube incrustado usando la carga diferida con JavaScript.

A.1. Incluir VanillaLazyLoad

Para esta implementación de LazyLoading, usaremos el script vanilla de LazyLoad. LazyLoad es un script ligero (2,4 kB) y flexible que acelera su aplicación web al diferir la carga de sus imágenes, videos e iframes de la mitad inferior de la página hasta el momento en que ingresarán a la ventana gráfica. Está escrito en JavaScript simple "vanilla", aprovecha la API IntersectionObserver, admite imágenes receptivas, optimiza su sitio web para conexiones más lentas y puede habilitar la carga diferida nativa.

Si usa NPM para manejar paquetes, instale con el siguiente comando:

npm install vanilla-lazyload

O si no usas NPM, inclúyalo directamente a través de algún marcado:

<script
  async
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"
></script>

El tamaño del script Vanilla Lazyload es de solo 7.34 KB, por lo que definitivamente es una ganancia para tu proyecto considerando los 272 que agregaría solo con el video incrustado. Para obtener más información sobre esta biblioteca, visita el repositorio oficial en Github aquí .

A.2. Carga Iframe de YouTube con LazyLoad

Ahora todo lo que tenemos que hacer es incluir el iframe del video de YouTube, asegúrese de agregar la clase perezosa al iframe y cambiar el srcatributo a data-src, para que el iframe no se cargue automáticamente. Incluya también la lógica de JavaScript para inicializar la carga diferida globalmente:

<!-- Marcado de video de YouTube integrado con la clase lazy -->
<iframe
    class="lazy" 
    data-src="https://www.youtube.com/embed/NuMvHeAqJ2I" 
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
>
</iframe>
<script>
// Establecer las opciones globalmente
// para hacer que LazyLoad se autoinicialice
window.lazyLoadOptions = {
    // Tus configuraciones personalizadas van aquí
};

// Escuche el evento de inicialización
// y obtener la instancia de LazyLoad
window.addEventListener("LazyLoad::Initialized", function (event) {
    window.lazyLoadInstance = event.detail.instance;
}, false);
</script>

Con este enfoque, el video de YouTube se cargará solo hasta que el usuario se desplace al área donde se encuentra el video.

B. Reproducir video manualmente

Ahora, la solución de cargar el video manualmente es excelente para aquellos que no pueden confiar en LazyLoading a través de IntersectionObserver. Por ejemplo, si tu video aparece inmediatamente en la ventana gráfica del usuario, simplemente no tiene sentido implementar la implementación mencionada, por lo que deberás implementar una diferente. La solución recomendada, en este caso, es simplemente mostrar la miniatura del video que deseas incluir, por lo que si el usuario desea reproducir el video, simplemente haga clic en la imagen y se cargará el video de YouTube:

Este enfoque es mucho más largo, sin embargo, vale la pena, ya que en comparación con los 272 KB del video incrustado, solo agregaría el tamaño de la imagen en miniatura (que solo es de aproximadamente 25 KB). ¡Entonces empecemos!

B.1. Crear marcado

En este caso, el marcado para mostrar el video será totalmente diferente al que estás acostumbrado de simplemente incrustar el iframe de youtube. Necesitas saber el ID del video. Por ejemplo, el iframe para incrustar el video es el siguiente:

<iframe width="560" height="315" src="https://www.youtube.com/embed/2knO_yUy2hE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

La URL del video es: https://www.youtube.com/embed/2knO_yUy2hE,  por lo que el ID del video es 2knO_yUy2hE.

Sabiendo esto, el marcado que colocaremos en lugar de incrustar directamente el video de youtube será el siguiente:

<!-- 1. Contenedor de envoltura de video -->
<div class="embed-youtube" data-video-id="2knO_yUy2hE"> 
    <!-- 2. El botón de vista previa que contendrá el icono Reproducir -->
    <div class="embed-youtube-play"></div>
</div>

B.2. Agregar CSS

Como puedes ver, el ID del video quedará almacenado en el atributo data-video-id que obtendremos con JavaScript para incrustar el video original de YouTube. Ahora, agreguemos algo de CSS para que el contenedor de vista previa se vea bien y llame al usuario a hacer clic para reproducir el video de YouTube:

.embed-youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.embed-youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
    width: 68px;
    height: 48px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
    cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.embed-youtube .embed-youtube-play:hover {
    background-color: #f00;
}

El CSS dado conservará esa relación de aspecto de 16:9 que debe mantener cada video de YouTube y tendrá un ícono de reproducción para que el usuario pueda interactuar con él.

B.3. Agregar JavaScript

Se requiere JavaScript para cargar automáticamente la imagen en miniatura del video. La lógica agregará también un detector de eventos de clic que inyectará el iframe del video de youtube incrustado cuando el usuario quiera reproducir el video:

(function(){
    let YouTubeContainers = document.querySelectorAll(".embed-youtube");

    // Repita todos los contenedores de YouTube que pueda tener
    for (let i = 0; i < YouTubeContainers.length; i++) {
        let container = YouTubeContainers[i];
        let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg"; 

        // Cargue la imagen en miniatura de forma asincrónica
        let image = new Image();
        image.src = imageSource;
        image.addEventListener("load", function() {
            container.appendChild(image);
        });

        // Cuando el usuario haga clic en el contenedor, cargue el video de YouTube incrustado
        container.addEventListener("click", function() {
            let iframe = document.createElement( "iframe" );

            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "");
            iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
            // Importante: agregue el parámetro GET de reproducción automática; de lo contrario, el usuario tendría que hacer clic en el video de YouTube nuevamente para reproducirlo
            iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");

            // Limpiar miniatura y cargar el iframe de YouTube
            this.innerHTML = "";
            this.appendChild( iframe );
        });
    }
})();

Alternativamente, puede obtener fácilmente la miniatura de YouTube de la URL de un video (https://www.youtube.com/watch?v=2knO_yUy2hE) con esta herramienta de descarga de miniaturas de YouTube en línea , por lo que puedes modificar la lógica un poco.

Puedes ver un ejemplo completo en ejecución en el siguiente JSFiddle que incluye el marcado, CSS y JavaScript:

Tenga en cuenta que con el ejemplo dado, es posible que pueda inyectar varios videos en una sola página sin comprometer la velocidad del sitio web.

Que te diviertas ❤️!