También con este método los vídeos serán responsive o adaptados a dispositivos móviles.
Insertar vídeos de YouTube sin aumentar el peso de la página
Es fácil insertar o embeber un vídeo de YouTube, pero te sorprenderá saber cuánto peso adicional puede agregar ese vídeo incrustado a tu página web. El navegador tiene que descargar aproximadamente cerca de medio MB de archivos JavaScript adicionales para reproducir solo el reproductor de vídeo de YouTube. Y estos archivos se descargan incluso si el visitante nunca reproduce el vídeo incrustado.
El vídeo insertado no solo aumenta el tamaño de bytes de tu página web, sino que el navegador tiene que realizar múltiples solicitudes HTTP para renderizar el reproductor de vídeo. Esto aumenta el tiempo de carga general de tu página, lo que afecta a la de velocidad de la página. El otro inconveniente del código de inserción de YouTube predeterminado con la etiqueta IFRAME es que no es responsive. Si las personas ven tu sitio web en un teléfono móvil, es posible que el reproductor de vídeo no se ajuste de forma correcta.
Lo que vamos a conseguir, con el código que pondré a continuación, es cargar una miniatura del vídeo de YouTube insertado y el reproductor de vídeo real se cargará solo cuando el usuario haga clic manualmente en la miniatura.
Estas imágenes en miniatura tienen un tamaño aproximado de 15 kB, por lo que podemos reducir el tamaño en casi 500 KB, no está mal.
Código para embeber vídeos de YouTube
Sin más rodeos, lo primero que haremos es copiar y pegar el siguiente código en cualquier lugar de tu página web donde te gustaría mostrar el vídeo de YouTube.
Recuerda reemplazar VIDEO_ID por el ID del vídeo de YouTube.
<div class=»youtube-player» data-id=»VIDEO_ID»></div>
Puedes pegar varios bloques DIV con diferentes ID de vídeo si necesitas embeber varios vídeos en la misma página.
A continuación, debes colocar el siguiente código de JavaScript dentro de tu sitio web. Si la web la hiciste en WordPress no lo pongas en el archivo footer.php, mejor crear, dentro de la carpeta js de tu child theme, un archivo que se llame por ejemplo scripts.js y lo pegas dentro.
/* Youtube embed */
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);
}
Recuerda que si creas el archivo scripts.js luego tienes que llamarlo en el archivo functions.php, por ejemplo de la siguiente forma, según la ruta que tengas y nombre del archivo:
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_script( ‘scripts-js’, get_stylesheet_directory_uri() . ‘/js/scripts.js’, array ( ‘jquery’ ), 1.1, true);
}
Por último, quedará poner el CSS. Copia y pega el siguiente código en tu hoja de estilos. Esto hará que el vídeo sea responsive y también podrás cambiar el icono del play.
.youtube-player {
position: relative;
padding-bottom: 56.23%; /* Usa 75% para vídeos 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;
}
Yo el CSS lo cambié un poco para ajustarlo más a mi gusto, con menos anchura, para versión pc y luego cambiando de nuevo esa anchura al 100% para la resolución de móvil. También hice otros cambios.