';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Un buen método para embeber vídeos de YouTube en tu sitio web

Hace poco, vimos un artículo donde se hablaba de cómo hacer responsive los vídeos de YouTube. En esta ocasión os enseñaré un mejor método para poder embeber o incrustar vídeos de YouTube y no afectar al rendimiento y velocidad de tu sitio web. 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.

un buen metodo para embeber videos de youtube en tu sitio web img - iborra web design

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;
}

A continuación puedes ver un ejemplo de como quedaría. 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, si inspeccionas el código de cómo lo puse podrás verlo mejor.

!Si te gustó este método para embeber vídeos de YouTube, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comentarios
Paco (Iborra Web Design)

Artículos destacados

Hay 2 comentarios en este artículo
  1. Mario
    12 septiembre 2020, 17:38

    Muy buen artículo!

    ¿Sabes cómo habría que modificar el código de inserción del vídeo para que comience en un punto determinado en lugar de al principio del vídeo? He probado con “start=200” pero no funciona. Gracias

    • Paco (Iborra Web Design)
      14 septiembre 2020, 18:05

      Hola Mario,

      Gracias por comentar. Configurar la opción ‘start’ en este método es complicado, es un parámetro para configurar el <iframe> y este método es distinto. Te paso la información de YouTube API de IFrame por si te puede servir. Otra opción completamente diferente, es utilizar algún programa de edición de vídeo para recortarlo y luego subirlo.

      Un saludo.

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp