Incrustar vídeo de YouTube y que se vea responsive: dos soluciones con CSS y JavaScript

YouTube es una poderosa herramienta para ver vídeos en línea de todo tipo, como de ocio como de manera profesional y que de adapta perfectamente a muchos otros nichos como el blogging; YouTube permite insertar fácilmente vídeos en nuestra web pero lo que pueda que no sea tan fácil es que el vídeo se comporte de manera responsive; lo que quiere decir que el vídeo se adapte a la web, al tamaño de la web que depende del tamaño de la pantalla y de esta forma que fácilmente podemos incorporar vídeos de YouTube en nuestra web como vimos en una entrada anterior y que sean responsive

Cuando embebemos el código de vídeo en nuestra web y lo probamos en un teléfono o tablet el resultado es bastante desagradable... vemos que YouTube no se encarga de re-escalar el video correctamente según el tamaño de la pantalla; si analizamos el video vemos que el mismo cuenta con un tamaño fijo definido por los atributos height y width.

Por lo tanto el código que nos da YouTube ya tiene un tamaño predefinido indicando el ancho y largo del mismo y pasa de largo que el contenido sea responsive.

Cuando intentamos hacer un video de YouTube responsive vemos que nos da muchos problemas, al intentar escalar el vídeo, que se vea correctamente y no conseguimos que el video sea responsive en móviles, tabletas y PC; pero no te preocupes que traemos un par de soluciones las cuales puedes emplear una u otra dependiendo de tus necesidades.

Cómo hacer un video de YouTube responsive

Para este tema, de como hacer que nuestros videos luzcan como dios manda, sin corte y se puedan consumir o ver correctamente, presentamos dos soluciones, una de ellas es mediante CSS y poco más general y la otra es mediante JavaScript la cual es más completa y permite adaptar los videos correctamente según las proporciones del video.

Puedes emplearlas en conjunto o individuales y experimentar como tu desees para que tus videos luzcan como tu quieras; el primero que veremos será con CSS.

Primera opción responsive para el video con CSS

Anteriormente hablamos sobre cómo colocar un en este video veremos como hacer un video de YouTube responsive para que se vea correctamente; como indicamos más adelante necesitamos un contenedor para colocar el iframe que contiene el vídeo; para eso podemos aplicar un CSS como el siguiente:

.v-container {
	position: relative;
	padding-bottom: 56.25%; /* proporción 16:9 */
	padding-top: 25px;
	height: 0;
}

.v-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

El CSS anterior permite al contenedor tener un espacio fijo provisto por el padding-bottom para poder escalar el video según las proporciones de la ventana; luego indicamos el tamaño máximo a nuestro vídeo tanto en ancho como en lo alto (y aquí entra en juego el padding-bottom que indicamos anteriormente que nos permite tener bajo control el height del iframe del video de Youtube) y de esta forma obtenemos nuestro video adaptable a la pantalla del teléfono, PC, tableta o cualquier otro dispositivo.

Definiendo el HTML de nuestro vídeo YouTube

Puedes retirar (o no) los atributos que agrega YouTube al momento de exportar el vídeo para definir el alto y el ancho fijo; es decir; si este es nuestro vídeo:

<iframe width="560" height="315"   src="https://www.youtube.com/embed/Me2aXBodqnA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Quedaría así:

<iframe src="https://www.youtube.com/embed/Me2aXBodqnA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Y este es el resultado:

Puedes consultar el ejemplo en:

Ejemplo Js

Segunda opción responsive para el video con JavaScript

Aunque no es una solución infalible la presentada anteriormente con CSS y puede traernos algunos problemas dependiendo de las proporciones o dimensiones del los videos que vamos a acoplar; sin embargo, es una forma rápida que tenemos para hacer nuestros videos de YouTube adaptativos sin muchos problemas pero es un poco más elaborada y requiere de JavaScript con la cual si podemos adaptar el video de YouTube mostrado en base a su proporción y que sea escalable, adaptativo o responsive.

Para ello lo primero que tenemos que hacer es obtener todos los videos de YouTUbe; que lo podemos hacer fácilmente con el siguiente JavaScript; lo primero que hacemos es seleccionar todos los vídeos cuyo atributo src contengan la URL de YouTube; para eso empleamos el selector de contención *:

var $videosYoutube = $("iframe[src*='www.youtube.com']")

Aquí empleamos jQuery, pero puedes traducir el código fácilmente a JavaScript nativo por si no usar jQuery; lo siguiente que hacemos es seleccionar el contenedor padre directo de nuestro video, en el ejemplo presentado en esta entrada, sería un section, pero usted ponga el suyo:

$v_container = $("body section")

Paso seguido, calculamos las proporciones, el aspecto radio, o como quieras llamarle del grupo de videos de YouTube obtenido y lo guardamos en un attr que definimos nosotros; este código solo se ejecuta una vez al momento de la carga de la web, para eso se emplea el siguiente código:

$videosYoutube.each(function () {
	$(this)
			.attr('proportion', this.height / this.width)
			//removemos las dimenciones del video
			.removeAttr('height')
			.removeAttr('width');

El siguiente paso es definir el callback para cuando se redimensiona la ventana y aplicar el reescalado de nuestro vídeo:

$(window).resize(function () {
	$videosYoutube.each(function () {

		var $el = $(this);
		$el
				.width(container_width)
				.height(container_width * $el.attr('proportion'));

	});
})

Este método se ejecuta cada vez que sea reescalada la ventana o la página web y por lo tanto reescala el vídeo para hacerlo adaptativo según varíe el tamaño del contenedor.

Finalmente el código para hacer nuestros videos responsive en YouTube:

// Find all YouTube videos
var $videosYoutube = $("iframe[src*='www.youtube.com']"),
		// el padre contenedor
		$v_container = $("body section");

// iteramos todos los videos de youtube y guardamos sus proporciones
$videosYoutube.each(function () {
	$(this)
			.attr('proportion', this.height / this.width)
			//removemos las dimenciones del video
			.removeAttr('height')
			.removeAttr('width');

});

// Cuando se redimenciona la ventana
$(window).resize(function () {

	var container_width = $v_container.width();

	// Resize all videos according to their own aspect ratio
	$videosYoutube.each(function () {

		var $el = $(this);
		$el
				.width(container_width)
				.height(container_width * $el.attr('proportion'));

	});
}).resize(); // invocamos el método a la carga

Puedes ver el ejemplo final en el siguiente enlace:

Ejemplo Js

Estos códigos puedes emplearlos con otros sistemas de videos como Vime para que también los videos se adapten al tamaño de la pantalla; funcionan perfectamente para que nuestros videos sean responsive de una vez por todas.

Descargar ejemplos

06-08-2018 - Andrés Cruz