Fluid Width Video Embeds with jQuery - FitVids

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 logs:

2016-02-23

• Fixed duplicate video issue caused by the back button.

2015-02-14

• Remove illegal character causing error

2014-05-31

• Fix trailing comma

2014-04-08

• Added support for disable selectors

2014-04-03

• added check for CSS height and width on element

2014-04-02

• update.

2013-12-13

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

---

This awesome jQuery plugin is developed by davatron5000. For more Advanced Usages, please check the demo page or visit the official website.