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

<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

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.