Introducing FitVids.js

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

YouTubeY
VimeoY
Blip.tvY
ViddlerY
Kickstarter Y

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

Comments?

Nope. Don't worry about leaving them here, instead hit me up @TRST_Blog and share your thoughts.

What is this Place?

This is the weblog of the strangely disembodied TRST. Here it attempts to write somewhat intelligibly on, well, anything really. Overall, it may be less than enticing.