FitVids.js, plugin jQuery para hacer los videos “Responsive”

Ultimamente se está hablando mucho sobre Responsive Design, que es que nuestros diseños se ajusten perfectamente a cualquier dispositivo con conexión a internet, en esta web hemos visto varios tutoriales sobre este tema (Hablemos de el uso de media queries en CSS3, Creando un Diseño Responsive design con CSS3 Media Queries), pero lo que hoy te quiero mostrar es que podemos seguir utilizando esta técnica responsive con todos nuestros archivos de la web aun multimedia , para hacer nuestra web mas practica y accesible a todo dispositivo, el tema es que podemos hacer que nuestros videos también sean Responsive, es decir autoajustable o adaptable según el dispositivo de salida.

Te hablo de FitVids.js, este es un plugin para hacer cualquier video responsive, se adaptara perfectamente y automáticamente al tamaño del contenedor o dispositivo de salida, algo muy práctico para el diseño web en cuanto a su contenido para ser perfectamente visualizado en teléfonos inteligentes y tabletas.

fitvidsjs

Este plugins es compatible con todos los navegadores incluyendo IE.

FitVids.js soporta varios reproductores de vídeo, Desde YouTube y Vimeo, hasta los menos conocidos, como Blip.tv, Viddler y Kickstarter.

Implementación

Lo primero es incluir los archivos js que trae el plugin por defecto, el Jquery.js y fitvids.js

Luego integramos el código del video en este caso proporcionado por youtube.

En el Css especificamos el valor del contenedor, puede ser en %

y por ultimo incluimos la siguiente funcion con el contenedor del video.

y listo !!.

En resumen. FitVids es un excelente plugins que nos ayudara mucho con nuestro contenido tipo video en esta época del diseño web multidispositivos, en esta época del responsive design.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

3 Respuestas

  1. Hi there, yes this paragraph is truly good and I have
    learned lot of things from it about blogging.

    thanks.

  2. josua dice:

    bien, es de facil uso y muy importante, Gracias..

  3. This is very fascinating, You are an overly skilled blogger.
    I have joined your rss feed and stay up for in quest of
    more of your excellent post. Also, I have shared your
    web site in my social networks