Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

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.

codection_video_linux_hispano

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:

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:

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

Leer entrada anterior
WordPress Córdoba Meetup
Otro año más: III WordPress Meetup Córdoba 2013 este año dos días, con talleres y mejores ponencias que nunca

Todavía recuerdo cuando organizamos la primera WordPress Meetup Córdoba, la acogida que tuvo y el buen sabor de boca que...

Cerrar