Skip to content

Latest commit

 

History

History
82 lines (64 loc) · 2.67 KB

README.md

File metadata and controls

82 lines (64 loc) · 2.67 KB

Fluidvids.js Build Status

Fluidvids is 1KB standalone module that provides a fluid solution for video embeds. By default, fluidvids supports YouTube and Vimeo - but you can easily add your own players. Fluidvids also provides support for dynamically injected (XHR/Ajax/createElement) videos.

Check out a demo of fluidvids. Also available as a WordPress plugin.

Methods

init()

Pass in your configuration.

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

Fluidvids internally constructs a strict Regular Expression which obides by your players Array, so ensure any new videos you add are added to players: []. This helps avoid any unwanted videos being parsed and provides flexibility for scaling easily.

apply()

Provides dynamic video support. Using apply() 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.apply();

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')();

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 </body> tag.

<body>
  <!-- html above -->
  <script src="dist/fluidvids.js"></script>
  <script>
  // fluidvids module available
  </script>
</body>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release history

  • 2.2.0
    • XHR/Ajax content support via new apply() method to requery DOM
    • Add AMD support
  • 2.1.0
    • Fix IE8 bug
  • 2.0.0
    • Complete rewrite using Module pattern with public methods
    • Better ability to add custom players
    • Add a custom selector
  • 1.2.0
    • Make use of Prototypes
  • 1.1.0
    • Better structure
  • 1.0.0
    • Initial release