La forma de insertar un video de Youtube en WordPress es utilizando en el editor el bloques el incrustado Youtube, en el que le indicamos la URL del video de Youtube que queremos mostrar.
Está técnica genera un <iframe> en nuestra web con la carga de complementos de Youtube necesarios para su ejecución, ralentizando la carga de la página.
Así una página optimizada y con cache, sin video incrustado de YouTube, que tiene un valor de 94 con el PageSpeed Insights de Google, puede pasar después de la inserción de un video a 85 para ordenador. Esto es más pronunciado en el caso de móvil, que pasa de un valor de 68 a 39. Es decir, un descenso de 9 puntos para ordenador y de 29 puntos en el caso de móvil.
Indicándonos el propio aplicativo de PageSpeed que quitemos recursos de JavaScript y que se corresponden con los complementos cargados por Youtube, necesarios para reproducir el vídeo.
Para evitar este descenso en el ranking de PageSpeed podemos recurrir a diferentes técnicas para mejorar la velocidad de carga, entre ellas, una opción es la carga diferida del video de YouTube.
Esto puede ser realizado de forma sencilla con un un simple script que recargue el video una vez se ha cargado la página y el usuario interactúa con ella. Con esta técnica se puede pasar a los valores iniciales de 94 para ordenador y 68 para móvil de PageSpeed.
El código en jQuery a añadir a nuestra web sería el siguiente:
jQuery(document).ready(function($) {
var ytIframes = $('iframe[src*="youtube.com"]');
ytIframes.each(function(i,e) {
var replaced = false;
var ytFrame = $(e);
var ytLoader = $('<div>');
ytLoader.data('ytFrame',ytFrame);
ytFrame.replaceWith(ytLoader);
$(window).on('scroll',function() {
if (! replaced) {
ytLoader.replaceWith(ytFrame);
replaced = true;
}
});
$(window).hover(function() {
if (! replaced) {
ytLoader.replaceWith(ytFrame);
replaced = true;
}
});
});
})
En el mismo, lo que hacemos es eliminar el código del iframe de los videos de youtube y, en el momento que el usuario interactúa con la web por medio de un scroll o con el ratón, se genera el código del iframe de los videos de Youtube.
Esta técnica se puede utilizar si el vídeo no aparece inicialmente en la cabecera de nuestra página o si la interacción del usuario es inmediata. En el caso de que inicialmente queramos mostrar el video, esta eliminación inicial del mismo se puede sustituir por mostrar una imagen del video y cuando el usuario interactúe con un click sobre la imagen realizar el proceso de incrustar el video y reproducirlo, e incluso combinar ambas técnicas:
jQuery(document).ready(function($) {
var ytIframes = $('iframe[src*="youtube.com"]');
ytIframes.each(function(i,e) {
var replaced = false;
var ytFrame = $(e);
var ytKey;
var tmp = ytFrame.attr('src').split(/\//);
tmp = tmp[tmp.length - 1];
tmp = tmp.split('?');
ytKey = tmp[0];
var ytLoader = $('<div class="ytLoader">');
ytLoader.append($(`<div class="ytp-cover" style="background-image: url('https://i.ytimg.com/vi_webp/${ytKey}/sddefault.webp');">`));
ytLoader.append($('<div class="ytp-large-play-button ytp-button" aria-label="Botón de reproducción"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></div>'));
ytLoader.data('ytFrame',ytFrame);
ytFrame.replaceWith(ytLoader);
ytLoader.click(function () {
if (! replaced) {
var ytFrame = ytLoader.data('ytFrame');
ytFrame.attr('src',ytFrame.attr('src')+'&autoplay=1');
ytLoader.replaceWith(ytFrame);
replaced = true;
}
});
// $(window).on('scroll',function() {
// if (! replaced) {
// ytLoader.replaceWith(ytFrame);
// replaced = true;
// }
// });
// $(window).hover(function() {
// if (! replaced) {
// ytLoader.replaceWith(ytFrame);
// replaced = true;
// }
// });
});
})
A este código habría que añadir el código CSS para maquetar el botón y la imagen:
.ytLoader {
position: relative;
width: 640px;
height: 360px;
}
.ytp-cover {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
}
.ytp-large-play-button {
position: absolute;
left: 50%;
top: 50%;
width: 68px;
height: 48px;
margin-left: -34px;
margin-top: -24px;
-moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
z-index: 63;
}
.ytp-large-play-button-bg {
-moz-transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1);
-webkit-transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1);
transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1);
fill: #212121;
fill-opacity: .8;
}
.ytp-cover:hover .ytp-large-play-button-bg {
-moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
fill: #f00;
fill-opacity: 1;
}