SummArg | Cursos y recursos para webmasters

17/09/2011

Insertar videos en un ancho fluido con jQuery, FitVids.js

Insertar videos de Vimeo, Youtube y servicios similares en layouts de ancho fluido puede resultar complicado, los videos no siempre se resizean como lo deseamos y es frecuente que parte del mismo quede cortado o desproporcionado.

Atendiendo a este problema, los creadores de lettering.js y FitText nos ofrecen un nuevo plugin para jQuery: FitVids.js. Su uso es simple. Primero insertamos los videos dentro de un div con class .container y les asignamos los valores por defecto.

<div class="container">
        <div class="vendor">
         <iframe width="425" height="349" src="http://www.youtube.com/embed/FKWwdQu6_ok" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Antes del cierre de la etiqueta <body> colocamos el link a jQuery, al plugin y la configuración del mismo.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      <script src="jquery.fitvids.js"></script>
      <script>
        //$(".container").fitVids();
        $(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});
      </script>

Solo resta redimensionar la ventana del navegador y comprobar su funcionamiento.

FitVids.js

Dejar un comentario