Skip to content

Latest commit

 

History

History
84 lines (63 loc) · 1.98 KB

Meteor.md

File metadata and controls

84 lines (63 loc) · 1.98 KB
Raw

Vide

Easy as hell jQuery plugin for video backgrounds.

Notes

  • All modern desktop browsers are supported.
  • IE9+
  • iOS plays video from a browser only in the native player. So video for iOS is disabled, only fullscreen poster will be used.
  • Some android devices play video, some not — go figure. So video for android is disabled, only fullscreen poster will be used.

Install

meteor add vodkabears:vide

Usage

Prepare your video in several formats like '.webm', '.mp4' for cross browser compatibility, also add a poster with .jpg, .png or .gif extension:

path/
├── to/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

Because of how meteor renders templates reactively you will need to initialize manually for the templates you want to use vide in.

Template.templateName.onRendered(function() {
  this.$('#elementName').vide('path/to/video');
});

Meteor integration by zimme.

Options

Below is a complete list of options and matching default values:

{
  volume: 1,
  playbackRate: 1,
  muted: true,
  loop: true,
  autoplay: true,
  position: '50% 50%', // Similar to the CSS `background-position` property.
  posterType: 'detect', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
  resizing: true // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
}

Methods

Below is a complete list of methods:

// Get instance of the plugin
var instance = $('#yourElement').data('vide');

// Get video element of the background. Do what you want.
instance.getVideoObject();

// Resize video background.
// It calls automatically, if window resize (or element, if you will use
// something like https://github.com/cowboy/jquery-resize).
instance.resize();

// Destroy plugin instance
instance.destroy();

More Info

See full documentation on Github.