https://github.com/toddmotto/fluidvids
Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.
https://github.com/toddmotto/fluidvids
Last synced: 11 months ago
JSON representation
Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.
- Host: GitHub
- URL: https://github.com/toddmotto/fluidvids
- Owner: toddmotto
- License: other
- Created: 2013-01-22T21:03:08.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2022-08-11T23:13:32.000Z (over 3 years ago)
- Last Synced: 2024-10-12T08:10:10.334Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://toddmotto.com/labs/fluidvids
- Size: 166 KB
- Stars: 414
- Watchers: 22
- Forks: 74
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- web-development-resources - FluidVids.js
README
# fluidvids.js [](https://travis-ci.org/toddmotto/fluidvids)
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](http://toddmotto.com/labs/fluidvids).
* Polymer.js [Web Component](//github.com/toddmotto/fluidvids-polymer) version
* React.js [component](//github.com/toddmotto/fluidvids-react) version
* [WordPress plugin](http://wordpress.org/plugins/fluidvids) version
## Methods
#### init()
Pass in your configuration. That's it.
```javascript
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.
```javascript
// 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](https://github.com/substack/node-browserify)
Use the repository hook:
```
npm install toddmotto/fluidvids
```
Then require `fluidvids` in your file:
```javascript
// 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 `
// fluidvids module available