Lets your videos be responsive by wrapping them in an aspect ratio container.

This module is based heavily off of Dave Rupert's FitVids jQuery plugin.

npm install fitvids --save

You can also download the files manually and include them via a <script> tag.

fitvids() // Bam, done.

The module exports a single function. Just call it, and it'll wrap video embeds from Youtube, Vimeo, and Kickstarter in a responsive container. Other video players can be supported by passing a custom selector via the options.

To wrap videos that have been added to the page dynamically, just call the function again. Fitvids is smart enough to only wrap the new videos.

To only wrap videos that are a child of an element, you can provide an optional selector:

fitvids('.video-container')

Only videos that are descendants of .video-container will be made responsive.

By default, fitvids automatically wraps Youtube, Vimeo, and Kickstarter players, but if you'd like it to wrap others too, you can pass them in as selectors via the players property.

fitvids({
  players: 'iframe[src*="example.com"]'
})

Or several at once:

fitvids('.video-container', {
  players: ['iframe[src*="example1.com"]', 'iframe[src*="example2.com"]']
})

If you'd like to ignore certain videos, you can pass a selector via the ignore option:

fitvids({
  ignore: ['object']
})

This module supports every modern browser. It uses ES5 Array methods and querySelector. If you need to use fitvids on a legacy browser, fitvids will work as long as these features are polyfilled.

Feel free to make issues or pull requests with bug reports or suggestions.

When contributing code, you can run tests via:

make test

To build distributable versions of the script, run:

make build

WTFPL