Need help with fluidvids?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

toddmotto
407 Stars 75 Forks Other 54 Commits 12 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 5,794
Angular
Vanilla...
Gulp
angular...
30 commits
# 399,988
promise...
callbac...
CSS
TeX
1 commit
# 36,934
ghost-t...
WordPre...
Ember
TypeScr...
1 commit
# 7,462
TypeScr...
GraphQL
Koa
node
1 commit
# 266,467
React
OCaml
buckles...
reasonm...
1 commit
# 34,302
CSS
rwd
html5
React
1 commit

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.