FitVids.js. Plugin para insertar videos fluidos en tu web

Muchas veces tenemos la necesidad de dividir nuestra pantalla en varias ventanas y ver algunas en una sola, pero comúnmente no podemos acomodar todo como quisiéramos. Por ejemplo, cuando queremos ver un video, estar en Facebook y hacer la tarea en Word, tendríamos que dividir la pantalla (que tal vez y si nos va bien es de 15 pulgadas) en tres partes. Por lo que al momento de dividirla pensaría en 2 ventanas en la parte superior y una en la inferior, donde la página del video tendría que acomodarla a modo que el ancho del mismo quepa en ese tercio de espacio asignado.

Personalmente me ha pasado y es frustrante estar acomodando todas las pantallas sólo para ver en tamaño “normal” el video. Es por ello que te presentaré FitVids.js, una solución para este problema.

¿Qué es FitVids.js?

Un plugin para JQuery fácil de usar y muy ligero en el que podemos automáticamente modificar el ancho del video cuando aumentamos o disminuimos el tamaño de la ventana. Cabe mencionar que tal plugin fue construido por Chris Coyier y Paravel.

¿Cómo usarlo?

Debes incluir jQuery 1.7 o posterior y FitVids.js en el diseño de tu página web y orientar el contenedor de vídeos con fitVids ().

<script src="path/to/jquery.min.js"> </script>

<script src="path/to/jquery.fitvids.js"> </script>

<script>

$(document).ready(function(){

// Target your .container, .wrapper, .post, etc. $("#thing-with-videos").fitVids(); });

</script>

Así envolverá cada vídeo en un div.fluid-width-video-wrapper y aplicará el CSS necesario. Después de la primera llamada de Javascript lo demás es magia de CSS.

Aquí un ejemplo en video de como funciona el plugin:

Compatibilidad

• YouTube            
• Vimeo 
• Blip.tv 
• Viddler               
• Kickstarter

Descarga

Podrás obtener el plugin FitVids en el GitHub oficial.

Fuente: HTML5 Camp MX