fitvids

fitvids

Lets your videos be responsive by keeping an intrinsic aspect ratio.

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 all your videos. By default it applies to any videos on the page.

Options

Custom Selector

If you'd prefer to limit this to a single element, you can call fitvids with an optional selector:

fitvids('.video-container')

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

If there's certain videos you'd like to be ignored, you can pass those in as an option via the ignore property.

fitvids({
	ignore: '.a-special-video'
})

How it works

Browser Support

This module uses document.querySelector which is supported in newer browsers. According to Can I Use, querySelector has a 94.61% global support rate, so it should be safe for most people.

• Firefox 3.5+
• Chrome 4+
• Opera 10+
• IE 8+
• Safari 3.1+
• Safari iOS 3.2+

License

WTFPL