Fully Configurable HTML5 Video Background Plugin With jQuery

Just another jQuery video background plugin that makes your HTML5 video full window and scales to the regular aspect ratio just like the CSS background-size: cover property. Also provides a fallback that uses poster image as the background when the browser doesn't support the HTML5 video. The plugin will resize the video background based on a resize event initiated on the browser window.

Basic usage:

1. Put jQuery library and the jQuery Video Background plugin's script right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.videobackground.js"></script>

2. Create a DIV container for the video background at the beginning of the webpage.

<div class="video-background"></div>

// or
$('body').prepend('<div class="video-background"></div>');

3. Make the background video full window.

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.video-background video {
  min-height: 100%;
  min-width: 100%;
}

4. Initialize the plugin and set the paths to the HTML5 videos.

$('.video-background').videobackground({
  videoSource: [
    ['1.mp4', 'video/mp4'],
    ['1.ogv', 'video/ogg']
  ], 
  poster: 'poster.jpg'
});

5. All default plugin options.

$('.video-background').videobackground({

  // video source(s)
  videoSource: [],

  // poster image
  poster: null,

  // autoplay on page load
  autoplay: true,

  // for video preload
  preload: 'auto',

  // infinite loop
  loop: false,

  // position of video controls
  controlPosition: null,

  // array of control text
  controlText: ['Play', 'Pause', 'Mute', 'Unmute'],

  // resize to match the browser height
  resize: true,

  // preload html
  preloadHtml: '',

  // preload callback
  preloadCallback: null,

  // loaded callback
  loadedCallback: null,

  // either the document or the window
  resizeTo: 'document'
  
});

6. Play/pause the background video. When attached to a video background it will trigger the associated video to play or pause. The event it triggeres is dependant on the existing state of the video. This method can be triggered from an event on a external that. If the that has a unique controlPosition this will have to be declared. Requires the video to be loaded first.

$('.video-background').videobackground('play');

7. Mute/unmute the background video. When attached to a video background it will trigger the associated video to mute or unmute. The event it triggeres is dependant on the existing state of the video. This method can be triggered from an event on a external that. If the that has a unique controlPosition this will have to be declared. Requires the video to be loaded first.

$('.video-background').videobackground('mute');

8. Resize the background video. When invoked will resize the video background to the height of the document or window. The video background height affects the height of the document. Affecting the video background's ability to negatively resize.

$('.video-background').videobackground('resize');

9. Destroy the background video plugin. Will unbind event listeners and remove HTML created by the plugin. If the that has a unique controlPosition this will have to be declared.

$('.video-background').videobackground('destroy');

---

This awesome jQuery plugin is developed by georgepaterson. For more Advanced Usages, please check the demo page or visit the official website.