JMiur [E]

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"];

3 comentarios:

Asesino Cereal  

Yo utilizo Shadowbox para que los videos agarren lo máximo que puedan :)

Responder
JMiur  

No es lo mismo. ShadowBox es una ventana modal.

Responder
Puzzle  

Buenísimo!
Aunque si lo colocamos muy peque, la barra de abajo se junta todo, y no queda muy estético.. Pero bueno, una solución para muchos casos estupenda!

Yo estaba por crear una galería de vídeos y tal, no se si lo recuerdas JMiur, pues a la final me quede con el canal de youtube.. Por ahora, al menos!
Ya veremos si luego invento algo mas!

un saludo maquina!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR