Un mejor método para insertar vídeos de YouTube en tu web

Es fácil insertar un video de YouTube en tu página web, pero te sorprenderá saber cuánto peso adicional puede agregar el video de YouTube a tus páginas web. El navegador tiene que descargar alrededor de medio Mb de archivos extra JavaScript (ver captura de pantalla) solo para insertar el reproductor de vídeo de YouTube. Y estos archivos se descargan incluso si el visitante nunca reproduce el video insertado.

Insertar videos de YouTube sin aumentar peso

El vídeo insertado no sólo aumenta el tamaño de bytes de sus páginas web, sino que el navegador tiene que hacer varias solicitudes HTTP para procesar el reproductor de vídeo. Esto aumenta el tiempo total de carga de la página, afectando así la puntuación de la velocidad de la página. El otro inconveniente con el código predeterminado de inserción de YouTube es que no es responsive. Si la gente ve su sitio web en un teléfono móvil, es posible que el reproductor de video no cambie el tamaño correctamente para la pantalla pequeña.

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: sólo inserta la imagen en miniatura de un video de YouTube y el reproductor de vídeo real sólo se carga cuando el usuario hace clic manualmente en la miniatura.

Las imágenes en miniatura de YouTube tienen un tamaño de aproximadamente 15 kB, por lo que podemos reducir el tamaño de bytes de las páginas web en más de 500 kb. ¡lo cual es bastante!

El video de arriba está insertado usando la misma técnica aquí descrita (demo).

Cuando un visitante hace clic en el botón de reproducción, la imagen en miniatura es reemplazada por el reproductor de vídeo estándar de YouTube con la reproducción automática establecida en 1 para que reproduzca el video de forma instantánea. La ventaja es que el JavaScript extra de YouTube se carga sólo cuando alguien decide ver el vídeo insertado y no de otra manera.

Reproducciones ligeras y responsivas de YouTube

El código de inserción estándar de YouTube utiliza la etiqueta IFRAME y el ancho y la altura del reproductor de vídeo están codificados de forma que el reproductor no responde.

En el nuevo código de inserción (requerido) para que YouTube sea ligeramente diferente. No es necesario especificar el tamaño del reproductor, ya que ahora estamos incorporando el video de manera responsable. Además, el IFRAME se reemplaza con una etiqueta DIV y el IFRAME se agrega a la página sólo cuando el visitante hace clic en el botón de reproducción.

incrustacion_video_youtube

Insertar videos de YouTube de forma responsable – Tutorial

Copie y pegue el siguiente fragmento en cualquier parte de su página web en la que desee que aparezca el video de YouTube. Recuerde reemplazar VIDEO_ID por el ID real del video de YouTube.

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

No asignaremos altura y anchura ya que el reproductor de video ocupará automáticamente el ancho del antecesor mientras la altura se calcula automáticamente. Puede pegar varios bloques DIV con diferentes ID de vídeo si necesita incrustar varios vídeos en la misma página.

A continuación, coloque el JavaScript en cualquier parte de su plantilla web. Encuentra todos los vídeos incrustados en una página web y luego reemplaza los elementos DIV con las miniaturas de vídeo.

<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 = frikiThumb(v[n].dataset.id);
                div.onclick = frikiIframe;
                v[n].appendChild(div);
            }
        });

    function frikiThumb(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 frikiIframe() {
        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>

Por último, pegue el CSS antes de la etiqueta de cierre de la cabecera de su plantilla web.

Este método reducirá el tamaño de sus páginas web en 500 KB al tiempo que hace que su sitio móvil sea amigable. Puede referirse al código anotado para comprender cómo funciona la inserción a petición.

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Usar 75% para videos 4:3*/
        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;
    }

</style>

Tenga en cuenta que los navegadores de Chrome y Safari en iPhone y Android solo permiten la reproducción de vídeo HTML5 cuando se inicia con una interacción del usuario. Bloquean los medios incrustados de la reproducción automática para evitar descargas no solicitadas a través de redes celulares.