README

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

How Do I Use It?

Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with fitVids().

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

This will wrap each video in a div.fluid-width-video-wrapper and apply the necessary CSS. After the initial Javascript call, it's all percentage-based CSS magic.

Currently Supported Players

Add Your Own Video Vendor

Have a custom video player? We now have a customSelector option where you can add your own specific video vendor selector (mileage may vary depending on vendor and fluidity of player):

  $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
  // Selectors are comma separated, just like CSS

Note: This will be the quickest way to add your own custom vendor as well as test your player's compatibility with FitVids.

Known issues

Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.

Changelog

08.16.13 - v1.0.3 - 2.779k
- Optionally works with Zepto
09.02.11 - v1.0.2 - 2.376kb
- Added customSelector option
09.02.11 - v1.0.0 - 2.135kb
- Initial release
- Vimeo,YouTube, Blip.tv, Viddler, Kickstarter

Credits

@ChrisCoyier, @davatron5000, @TrentWalton, @raygunray

kraksoft / fitvids

Maintainers

Details