Make your video embeds responsive
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist Add 'ignore' option May 21, 2016
.gitignore Published npm module Aug 31, 2015
LICENSE.md Published npm module Aug 31, 2015
Makefile Add dist to build system May 21, 2016
README.md Update README.md Mar 14, 2017
index.js Add 'ignore' option May 21, 2016
package.json 2.0.0 May 21, 2016
test.js Add 'ignore' option May 21, 2016

README.md

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 one of the default selectors, 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