FluidVids

WebJar for FluidVids

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-toddmotto-fluidvids
Last Version

Last Version

2.1.0
Release Date

Release Date

Type

Type

jar
Description

Description

FluidVids
WebJar for FluidVids
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/toddmotto/fluidvids

Download github-com-toddmotto-fluidvids

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-toddmotto-fluidvids/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-toddmotto-fluidvids</artifactId>
    <version>2.1.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-toddmotto-fluidvids/
implementation 'org.webjars.npm:github-com-toddmotto-fluidvids:2.1.0'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-toddmotto-fluidvids/
implementation ("org.webjars.npm:github-com-toddmotto-fluidvids:2.1.0")
'org.webjars.npm:github-com-toddmotto-fluidvids:jar:2.1.0'
<dependency org="org.webjars.npm" name="github-com-toddmotto-fluidvids" rev="2.1.0">
  <artifact name="github-com-toddmotto-fluidvids" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-toddmotto-fluidvids', version='2.1.0')
)
libraryDependencies += "org.webjars.npm" % "github-com-toddmotto-fluidvids" % "2.1.0"
[org.webjars.npm/github-com-toddmotto-fluidvids "2.1.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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 </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.4.1
    • Fix bug for class names already existing on host element
    • Update Jasmine test accordingly
  • 2.4.0
    • Fix bug for comparing width/height attrs > 1000
    • Finish all unit tests
    • Move to Gulp
  • 2.3.0
    • Add support for videos where height > width
    • Multiple selector support and CSS change to unrestrict element type
    • Add npm entry point
    • Change apply() to render() for better naming
    • Use while loop for and improved loop perf
  • 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

Versions

Version
2.1.0