Responsive (adaptable) para vídeos de YouTube, la mejor solución.

codigo video incrustado youtube responsive
vídeo incrustado youtube responsive

Al final todos los blogueros acabamos incrustando vídeos de YouTube, Vimeo, etc… y parece mentira que a estas alturas aún tengamos que ir buscando soluciones para cosas tan básicas como es mostrar los vídeos incrustados de forma responsive (adaptable).

Llevamos unos cuantos años ya como para haber solucionado este tema, bueno, la verdad es que se podían poner las pilas en muchas cosas, pero el RWD Responsive Web Design (diseño web adaptable) está cada vez más a la orden del día.

Tanto es así que Google valora y mucho si una web o blog es responsive, dándole mayor importancia, calculando si el tamaño de letra es suficiente como para que se pueda leer bien desde un teléfono móvil, calculando también el tamaño de los botones, el peso de las imágenes, el tiempo de carga de la página, el número de conexiones con el servidor… en definitiva, si quieres gustarle a Google tienes que ser responsive.

Si eres bloguero ya te habrás dado cuenta de que la mayoría de themes (temas) para los blogs son responsive. De hecho, dudo que se hagan todavía themes (temas) que no lo sean, a menos que sea eso lo que se pretenda.

En WordPress ya hace por lo menos tres años que su theme (tema) por defecto es responsive. En otras plataformas de blogs no sé, ya que yo sólo uso WordPress, pero me imagino que por ahí van los tiros.

Y por si fuera poco, también te lo confirmo yo. El 95% de los usuarios de mi blog acceden a él desde un dispositivo móvil. (Es más, yo estoy escribiendo estas líneas desde mi teléfono móvil).

Así que queda claro la importancia de que nuestro sitio sea responsive, y como no te estoy contando nada que no sepas, seguro que tú también te has encontrado con el tema de los vídeos incrustados. Mil demonios!!! ya podían ser responsive por defecto, aunque si tu sitio es RWD (responsive web design / diseño web adaptable) en teoría se deberían de adaptar, pero por lo visto sólo a lo ancho.

Ahora te muestro unas imágenes de como se muestra el vídeo por defecto en una página RWD, y después de cada imagen pongo el vídeo incrustado adaptado con este código, para que puedas ver la diferencia.

iframes de vídeo no responsive en web RWD

YouTube.com

Captura de teléfono móvil - iframe Youtube no responsive en web RWD tal cual viene
Captura de teléfono móvil – iframe Youtube no responsive en web RWD tal cual viene


Tu.tv

Captura de teléfono móvil - iframe Tu.tv no responsive en web RWD tal cual viene
Captura de teléfono móvil – iframe Tu.tv no responsive en web RWD tal cual viene


Vimeo.com

Captura de teléfono móvil - iframe Vimeo no responsive en web RWD tal cual viene
Captura de teléfono móvil – iframe Vimeo no responsive en web RWD tal cual viene


DailyMotion.com

Captura de teléfono móvil - iframe DailyMotion no responsive en web RWD tal cual viene
Captura de teléfono móvil – iframe DailyMotion no responsive en web RWD tal cual viene


Podemos ver esas pedazo de bandas negras que nos restan un espacio valioso. Hay que tener en cuenta que estas imágenes son capturas de un teléfono móvil en una web RWD, si la web no fuera RWD, en vez de salir esas súper bandas negras, el vídeo se descuadraría y rompería la estructura de la web. Una muestra es la siguiente imagen.

iframe de vídeo no responsive en web no RWD

Captura iframe de video no responsive en web no RWD tal cual viene
Captura iframe de video no responsive en web no RWD tal cual viene

Hacer que los vídeos incrustados sean responsive es requetefácil. Sólo hay que poner el iframe que te da YouTube dentro de un div, y hacer un par de classes en css, y voilà!!! tú vídeo incrustado ya es responsive. Entonces ya tendrás las classes hechas en tu hoja de estilos, y sólo tendrás que poner los nuevos iframes dentro de un div que tenga la classe en cuestión. Fácil, ¿no?.

Pues no!!!.

Es que soy muy quisquilloso, porque sí, es fácil, pero esto tiene dos problemas, el primero es que tienes que acordarte cada vez que pongas un vídeo de incluirlo dentro de un div con su classe. Aunque para mí eso no es problema, ya que yo tengo muy buena memoria, por cierto… que estaba diciendo… jeje. Pues claro que es un problema, necesito una ampliación de RAM, cada noche reinicio el sistema y al día siguiente me despierto con la memoria vacía y disponible para afrontar un nuevo día. Pues sí, tengo la memoria justa para pasar el día, y en ocasiones eso es un problema.

Retomando el tema que nos atañe. El segundo problema de este sistema es que no tiene en cuenta que podemos tener cientos de vídeos ya incrustados. por ejemplo, si tienes un blog o web que no es responsive, desde hace un tiempo considerado, es fácil que tengas cientos o miles de vídeos incrustados. Entonces si tienes una web donde las páginas las tienes completamente en HTML (quiero decir sin usar plantillas) puedes usar un editor como notepad++ para que busque todos iframe y añada automáticamente el div, así harías todo el trabajo del tirón. Pero claro, si tu web o blog usa plantillas, entonces el contenido de las páginas está en una base de datos” y tendríamos que añadir los divs a mano.

Si éste es tu caso, que es muy probable, no te preocupes, también hay solución a lo tuyo. PLUGINS. ¿te suena este palabro?. Claro que te suena, y seguro que ya estás usando varios de ellos. Pues sí, hay multitud de plugins para solucionar este problema.

Pero es que me niego a usar un plugin para algo tan banal como esto. Los plugins consumen recursos muy valiosos, así que usaré plugins para cosas más complejas que me costaría demasiado trabajo hacerlas yo mismo. Pero intento evitar usar un plugin para algo que puedo solucionar con unas pocas líneas de código.

Ahora y aquí, voy a mostrar y explicar unas cuantas líneas de código en javascript y jquery, y alguna de css. Así que tendrás el código y además lo entenderás perfectamente por si lo quieres modificar a tu antojo.

Una vez implementado este código, no tendremos que hacer nada más, podremos incrustar nuevos vídeos sin tener que acordarnos de incluir nada, y además también adaptará todos los vídeos que ya estaban puestos antes.

Todo esto sin tener que modificar mil vídeos a mano, ni usar un plugin.

Simplemente… Maravilloso…

Este código no modifica nada en tu servidor, osea que tus datos están tal cual los tenías. lo que hace es modificar el DOM (Document Object Model) en el lado del cliente. Busca todos los vídeos incrustados, comprueba la relación de aspecto de cada uno de ellos, crea los estilos css necesarios para los diferentes aspectos, y por último envuelve cada vídeo en un div con el estilo que le corresponda.


Código para hacer responsive iframe/object/embed

jQuery(document).ready(function($) {

// Aquí puedes añadir todos los repositorios de vídeos que quieras
var repositorio = new Array ();
repositorio[repositorio.length] = 'https://www.youtube.com';
repositorio[repositorio.length] = 'http://tu.tv';
repositorio[repositorio.length] = 'https://player.vimeo.com';
repositorio[repositorio.length] = '//www.dailymotion.com';

// De entrada todos los iframe son "es_un_video = false" a menos que se demuestre lo contrario
var es_un_video = false;

$( 'iframe' ).each(function( index ) { // Bucle que itera por todos los iframe del DOM
	var source = $( this ).attr( 'src' ); // Almacenamos el valor del atributo "src" del iframe en la variable "source"
	if ( typeof source !== typeof undefined && source !== false ) { // Si el iframe tiene atributo "src"
		$.each( repositorio, function ( ind, elem ) { // Bucle que itera por todos los repositorios del array
			if ( source.indexOf( elem )!= -1 ) { // Comprobamos si el repositorio del iframe está en el array
				es_un_video = true; // Está en el array, por lo tanto es un vídeo que tenemos que adaptar
			}
		});

		if ( es_un_video ) { // Si lo hemos reconocido como un vídeo, hacemos la magia
			var ancho = $( this ).attr( 'width' ); // Guardamos el ancho del vídeo
			var alto = $( this ).attr( 'height' ); // Guardamos el alto del vídeo

			var aspecto = (alto/ancho) * 100; // Averiguar la relación de aspecto en porcentaje
			aspecto = aspecto.toFixed(2); // Le dejamos solo 2 decimales al aspecto
			// Creamos el DIV contenedor para el iframe con su CSS
			$( this ).after( '<div id="video_' + index + '" style="position: relative; padding-bottom: ' +
			aspecto + '%; height: 0; overflow: hidden;">' );
			// Metemos el iframe en el contenedor
			$( this ).appendTo( '#video_' + index );
			// Le aplicamos el CSS al iframe
			$( this ).css( { "position": "absolute", "top": 0, "left": 0, "width": "100%", "height": "100%" } );
			es_un_video = false; // Reseteamos es_un_video a false
		}
	}
});
});

Este código de aquí arriba es tal cual lo tengo puesto en phpyjavascript.com, y es el que se encarga de convertir cualquier vídeo incrustado en responsive. Podríamos decir que este código no es perfecto, ya que es necesario tener javascript activado en el navegador para que funcione, pero… resulta que estos repositorios de vídeos necesitan javascript para funcionar correctamente. Así que lo que era un problema, ha dejado de serlo. :)

En el array “repositorio” tenemos que añadir el dominio de los sitios web que queramos que nuestro script detecte y adapte el iframe, esto lo he hecho para tener más control. De esta forma solo se adaptarán los iframe de vídeo, así que podemos incrustar otros iframe con otros contenidos y estos no se adaptarán. No siempre querremos que nuestros iframes se adapten, como en el caso de poner uno al lado de otro, o que el iframe no deba ser redimensionado para que no se deforme la estructura de su interior.

A fin de cuentas, lo que hago es buscar la cadena de texto que incluimos en cada elemento del array “repositorio”, dentro del contenido del atributo “src” de cada iframe.

Es importante poner el nombre de dominio completo con el protocolo delante si lo lleva “http:// o https://”.

repositorio[repositorio.length] = 'https://www.youtube.com';
imagen-iframe-responsive-youtube-dominio-resaltado
iframe responsive youtube dominio resaltado

Si pusiéramos solo “youtube” en el array “repositorio”, el script detectaría cualquier iframe donde se encuentre esa cadena, y tomaría por un vídeo un iframe como el siguiente.

repositorio[repositorio.length] = 'youtube';
imagen-iframe-responsive-phpyjavascript-texto-resaltado
iframe responsive phpyjavascript texto resaltado

En el título del código he puesto “Código para hacer responsive iframe/object/embed”, y en cambio el código solo trabaja sobre los iframe, ya que los cuatro repositorios de vídeos que he puesto lo hacen también con un iframe. Si te encuentras en la situación de necesitar por ejemplo “embed”, es tan fácil como duplicar el bucle que itera por todos los iframe del DOM, y cambiarle “iframe” por “embed”. Así de fácil y sencillo.

Por último, podríamos querer que nuestro script actúe sobre todos los iframe, sin comprobar nada, da igual de lo que sea, y así no tenemos que poner el dominio del repositorio ni nada de nada. Entonces modificamos un poco nuestro código, y quedaría así.

 

jQuery(document).ready(function($) {

$( 'iframe' ).each(function( index ) { // Bucle que itera por todos los iframe del DOM
    var ancho = $( this ).attr( 'width' ); // Guardamos el ancho del vídeo
	var alto = $( this ).attr( 'height' ); // Guardamos el alto del vídeo

	var aspecto = (alto/ancho) * 100; // Averiguar la relación de aspecto en porcentaje
	aspecto = aspecto.toFixed(2); // Le dejamos solo 2 decimales al aspecto
	// Creamos el DIV contenedor para el iframe con su CSS
	$( this ).after( '<div id="video_' + index + '" style="position: relative; padding-bottom: ' +
	aspecto + '%; height: 0; overflow: hidden;">' );
	// Metemos el iframe en el contenedor
	$( this ).appendTo( '#video_' + index );
	// Le aplicamos el CSS al iframe
	$( this ).css( { "position": "absolute", "top": 0, "left": 0, "width": "100%", "height": "100%" }
);
});

Bueno, pues esto es todo. Espero que esto sea lo que andabas buscando. Ya ves, fácil… fácil… y suave… suave…

Ya sabes, si te ha sido útil este post, puedes comentar, compartir, copy-pastear… jeje.

Un saludo.
Joaquín García.

Si te ha gustado, lo puedes compartir.

4 comentarios sobre “Responsive (adaptable) para vídeos de YouTube, la mejor solución.”

    1. Hola Alejo, perdona por la tardanza en contestar.

      Tienes que copiar el código en tu archivo de funciones de Javascript, normalmente “functions.js”, aunque puedes crear tu própio archivo como “funciones.js” o “responsive.js”, lo puedes llamar como quieras y metes este código en el.
      Recuerda que usa jQuery, así que tienes que cargar primero jQuery y después tu archivo de funciones.

      Si tu página no está hecha con un CMS debes de poner las líneas de carga entre las etiquetas “head y /head”.

      Si tu página está hecha con WordPress.org debes de usar la función add_action de WP.

      Para otros CMS consulta con su documentación de ayuda.

      Perdona, pero solo domino WordPress.org como CMS, y las páginas hechas a pelo (sin ningún CMS).

      De todas formas estoy escribiendo un nuevo post donde todo esto lo detallo. En breve estará listo.

      Espero haberte ayudado, aunque he tardado tanto en contestar que seguro ya habrás solucionado el tema.

      Un saludo.

      [Editado]

      Aquí la entrada donde detallo como cargar los archivos CSS, jQuery y Javascript de forma correcta en páginas creadas sin CMS y en páginas creadas con WordPress.org.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>