fitvids

fitvids

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.

Install

npm install fitvids --save

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

Usage

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.

Options

Container Selector

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.

Custom Players

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"]']
})

Ignoring Selectors

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

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

Browser Support

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.

Contributing

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

License

WTFPL