Videos de tamaños fluidos con jQuery

FitVids es un pequeño plugin para jQuery que nos permite agregar videos y establecer su tamaño de tal manera que se adapte al espacio disponible, manteniendo su proporción y sin necesidad de tener que calcular nada previamente por lo que basta escribir el código de inserción tal como nos lo dan los distintos servicios y dejar que el script se encargue del resto.

Para usarlo, debemos tener la librería de jQuery agregada antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Y debajo, agregamos el script jquery.fitvids.js que podemos descargar desde github.

<script type='text/javascript'>
//<![CDATA[
(function( $ ){
  $.fn.fitVids = function() {
    var div = document.createElement("div"), ref = document.getElementsByTagName("base")[0] || document.getElementsByTagName("script")[0];
    div.className = "fit-vids-style";
    div.innerHTML = "<style>.fluid-width-video-wrapper {width:100%;position:relative;padding:0;} .fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>";
    ref.parentNode.insertBefore(div,ref);
    return this.each(function(){
      var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://www.kickstarter.com']", "object", "embed"];
      var $allVideos = $(this).find(selectors.join(","));
      $allVideos.each(function(){
        var $this = $(this), height = this.tagName == "OBJECT" ? $this.attr('height') : $this.height(), aspectRatio = height / $this.width();
        $this.wrap("<div class='fluid-width-video-wrapper' />").parent(".fluid-width-video-wrapper").css("padding-top", (aspectRatio * 100)+"%");
        $this.removeAttr("height").removeAttr("width");
      });
    });
  }
})( jQuery );
//]]>
</script>

Por último, ejecutamos la función donde sólo deberemos establecer el nombre de la clase CSS que usaremos como contenedor:

<script>
  $(document).ready(function(){ $(".elvideo").fitVids(); });
</script>

¿Cómo lo aplicamos a nuestro sitio? Colocando el IFRAME del video dentro de un DIV con esa clase que hayamos elegido:

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

Tal como está, funcionará con sitios de videos que utilicen un IFRAME como código para compartir videos: YouTube, Vimeo, Kickstarter, etc. Ellos también hablan de blip.tv o Viddler pero, ninguno de esos está contemplado sin embargo, podemos agregarlos si editamos esta línea:

var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://www.kickstarter.com']", "object", "embed"];

por ejemplo, así agrego blip.tv y elimino kickstarter.com:

var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://blip.tv']", "object", "embed"];