Fluid Width Video Embeds with jQuery - FitVids

File Size: 5.65 KB
Views Total: 9416
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

    // Target your .container, .wrapper, .post, etc.

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

Change logs:


  • Fixed duplicate video issue caused by the back button.


  • Remove illegal character causing error


  • Fix trailing comma


  • Added support for disable selectors


  • added check for CSS height and width on element



  • 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.