Fluid Width Video Embeds with jQuery - FitVids

Fluid Width Video Embeds with jQuery - FitVids
File Size: 5.47 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

FitVids is a lightweight jQuery Plugin that automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Supported Video Players

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

How to use it :

1. Include jQuery Library and FitVids.js

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

2. Call the plugin

<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

3. Markup

<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 class="vendor">
<iframe src="http://player.vimeo.com/video/25708134?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
</div>
</div>

Change log:

2014-04-08

  • Added support for disable selectors

2014-04-03

  • added check for CSS height and width on element

2014-04-02

2013-12-13

  • Optionally works with Zepto.
  • Adding note about Vimeo Autoplay API in IE11. 

For more Advanced Usages, please check the demo page or visit the official website.