fluidvids

by toddmotto

toddmotto / fluidvids

Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.

406 Stars 75 Forks Last release: Not found Other 54 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

fluidvids.js Build Status

Fluidvids is a 1KB standalone module that provides a fluid solution for video embeds. Fluidvids has the ability for custom players to be added as well as support for dynamically injected (XHR/Ajax/createElement) videos.

Live demo of fluidvids.

Methods

init()

Pass in your configuration. That's it.

fluidvids.init({
  selector: ['iframe', 'object'], // runs querySelectorAll()
  players: ['www.youtube.com', 'player.vimeo.com'] // players to support
});

selector

Type:

Array
Default:
['iframe']

Custom selector(s) that

fluidvids
will search for in the DOM and make fluid.

players

Type:

Array
Default:
['www.youtube.com', 'player.vimeo.com']

Internally constructs a strict

RegExp
which tells
fluidvids
which videos from specific domains to make fluid. This avoids any unwanted videos being parsed and adds developer flexibility.

render()

Provides dynamic video support. Using

render()
should only be done when you want to requery the DOM and look for newly added videos, such as
document.createElement('iframe');
. Fluidvids uses internal object caching to lookup
init()
configuration, so it's lightning fast.
// run after dynamic elements have been injected
// you'll need to run this each time you need it
fluidvids.render();

Installing with Bower

Use the repository hook:

bower install https://github.com/toddmotto/fluidvids.git

Installing with browserify

Use the repository hook:

npm install toddmotto/fluidvids

Then require

fluidvids
in your file:
// Note that it is called as a function
var fluidvids = require('fluidvids.js')();

Manual installation

Ensure you're using the files from the

dist
directory (contains compiled production-ready code). Ensure you place the script before the closing

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.