Modificar el tamaño de un vídeo de Vimeo o Youtube de forma dinámica (responsive)

Cuando insertamos un vídeo promocional o que pretendemos que esté siempre presente en una página de nuestra web lo mejor es que sea responsive, es decir, que cuando redimensionemos la ventana o se entre en la web con un dispositivo cuya resolución sea diferente todo quede conforme al tamaño de éste. Así siempre podrán ver el vídeo que colguemos sea cual sea la resolución o tamaño del render cliente.

Un ejemplo, que de hecho propuse la creación esta entrada por esto mismo, es la web de nuestra startup Codection (Javier Carazo y yo a la cabeza) donde en la página de entrada, la principal, encontramos el vídeo centrado y comprobaremos como al cargarlo sobre cualquier dispositivo o redimensionando la ventana el vídeo también lo hace.

El proceso para realizar esta tarea es muy simple, usaremos para ello una herramienta javascript standalone Fluidvids, bastante sencilla y que no hace uso interno de jQuery debido a lo liviana que es.

Bien, en nuestro caso lo hemos adaptado al tema de WordPress, bien podríamos haber creado un plugin o bien podemos hacerlo directamente sobre cualquier plataforma. La idea es la siguiente:

1.- Editamos nuestra hoja de estilos CSS y añadimos lo siguiente. Con el wrapper definimos el container, y con .fluidvids el estilo de la caja:

.wrapper {
	margin:0 auto;
	text-align:center;
	width:50%;
}
.fluidvids {
	background:#000;
	box-shadow:0 1px 4px #000;
	margin:30px 0;
}

2.- Añadimos el fichero JS en nuestro directorio. Podéis descargarlo desde aquí.

3.- E invocamos a la función una vez terminemos el vídeo

Añadiendo los vídeos como se muestra:

El sistema es compatible con vídeo de Vimeo y Youtube, si queremos compatibilizarlo con nuestro sistema editaremos el fichero Javascript descargado, modificando la siguiente línea de código:

  for (var i = 0; i < iframes.length; i++) {
    var players = /www.youtube.com|player.vimeo.com/;
    if (iframes[i].src.search(players) > 0) {
      new Fluidvids(iframes[i]).init();
    }
  }

El resultado es asombroso, juzgad: codection.com, o desde Fluidvids.