A repository of over 1000 quality jQuery plugins

jQuery FitVids JS

FitVids JS is a jQuery Audio & Video plugin.

Created by Davatron5000

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

Not what you're looking for? Click here to view more Audio & Video jQuery plugins

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>
    // Target your .container, .wrapper, .post, etc.

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

Kickstarter Y*

* means native support for these may be deprecated. If your video platform is not currently supported, try adding it via a customSelector...

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.

Ignore With Class

Have a video you want FitVids to ignore? You can slap a class of fitvidsignore on your object or container and your video will be displayed as it is defined.

If you'd like to add a custom block to ignore FitVids, use the ignore option.

  $("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
  // Selectors are comma separated, just like CSS

Target Videos embedded without classes or containers

Customers/clients will occasionally add a video to a general content area or article and this may be without a class or container that you're targetting. A solution to this is to target the parent of videos, using something like the below;

  // You can change the selector to suit potential video providers, or chain them if your customer is likely to use more than one provider

By targetting the iframe/embed parent you can then dynamically add in the fitVids special sauce on the fly without needing to know the container ahead of time.

Known issues

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

You might also like these other Audio & Video jQuery Plugins

  • articulate.js

    A jQuery plugin that lets the browser speak to you.

  • JqVideoBox

    jqVideoBox is jquery lightbox for videos from Youtube, Metacafe, Google Video, Dailymotion, Blip, Revver, Veoh, Vimeo and more

  • jQuery Video Lightning

    Turn any element into a lightbox or popover link for Youtube and Vimeo videos.