Defer parsing of javascript con los vídeos de YouTube

En la entrada de hoy te traemos la solución al error Defer parsing of javascript con los vídeos de Youtube. Este error aparece en los informes de GTmetrix cuando en tu página se encuentran vídeos de YouTube incrustados y penaliza bastante tu puntuación.

¿Cuál es el motivo de esta penalización? La respuesta es fácil. La optimización de las páginas de tu web es muy importante, igual que su velocidad de carga y que no ocupen muchos MB.

Al insertar un vídeo de YouTube en tu página, el navegador tiene que descargar entre medio y 1 MB adicionales para cargar el reproductor de YouTube. Imagínate, te trabajas una página optimizada, con imágenes que no superen los 100kB, con imágenes con las dimensiones correctas… y al insertar un vídeo, pam, tu página ya pesa 1MB más…

Si aún no te he convencido, el echo de incrustar vídeos con el código que YouTube te ofrece, provoca que tu navegador tenga que realizar bastantes peticiones HTTP lo que también aumentará el tiempo de carga de tu página y por lo tanto a la puntuación de velocidad de esta.

¿Supongo que te he convencido respecto el problema de poner los iframes que YouTube te ofrece de sus vídeos, no?

Entonces te diré que puedes respirar tranquilo, podrás subir los vídeos que quieras en tu página y además esta no se verá perjudicada.

¡¿Genial no?!

Para conseguir esto solo tendrás que añadir una serie de cambios en los estilos de tu página, en el javascript y en el código HTML.

A continuación te explico como solucionar el problema Defer parsing of javascript con los vídeos de Youtube.

Como poner Embed vídeos de YouTube sin incrementar el peso de tu página

Esta técnica actualmente ya se está utilizando en Google+. El resumen es incrustar una imagen en miniatura de un vídeo de YouTube y únicamente cargar el vídeo cuando el usuario haga clic en la miniatura.

Para realizar este desarrollo tendremos que añadir unos estilos CSS, unos controles jQuery y código HTML.

1- Vamos a empezar con el código HTML. Si te fijas, el código que YouTube te ofrece es del siguiente modo:

<iframe width="500" height="500" src="https://www.youtube.com/embed/ID_VIDEO"></iframe>

En vez de poner el anterior código, tendrás que poner el siguiente:

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

Si te fijas, el valor que tendrás que tener en cuenta es el ID que tiene el vídeo de YouTube, ya que este tendrá que aparecer en tu nuevo «div».

Repite este paso por todos los vídeos que tenga que añadir en tu página.

2- El siguiente paso consiste en añadir los siguientes estilos CSS para la correcta visualización de los vídeos.

.youtube-player {
    position: relative;
    padding-bottom: 56.23%;
    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;
}

3- El último paso y más importante, el código jQuery para controlar que cuando un usuario haga clic en un vídeo, este cargue correctamente el vídeo de YouTube.

El código que tendrás que añadir es el siguiente:

$(document).ready(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);
}

Y estos son todos los pasos que tendrás que seguir para solucionar el problema del Defer parsing of javascript con los vídeos de Youtube.

Con estos pasos conseguirás: