Responsive Html5 Video Background Plugin with jQuery - VideoBackground.js

Just another lightweight jQuery plugin for creating a fullpage, responsive video background using reqular Html5 videos.

Features:

• Auto resize to fit any screen size.
• Supports Html5 video formats: mp4, webm, etc.
• Several options to control the video background behaviors: mute, loop, autoplay.

See also:

• Fullscreen Background Video Plugin For jQuery - BigVideo
• Fullscreen Youtube Video Background Plugin with jQuery
• Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer

How to use it:

1. Create a DIV element for the video background. The plugin will insert an full size video into the element using Html5 video tag.

<div id="bg-video"></div>

2. The sample CSS to make the video background full webpage.

#bg-video {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

3. Wrap your main content into an overlay element.

<div id="overlay">
  ...
</div>

4. The required styles for the overlay.

#overlay {
  background: rgba(100,100,100,.5);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 10000;
  text-align: center;
}

5. Include jQuery library and the jQuery VideoBackground.js script at the bottom of your web page.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="videobackground.js"></script>

6. Call the plugin and set the path to your video file.

$(document).ready(function() {
  $('#bg-video').videoBackground("sample.webm");
});

7. Available options.

var settings = {
  autoplay: 'autoplay',
  muted: 'muted',
  loop: 'loop',
  fit: 'fill', // changes the object-fit property of the video
  src: '' // url to video
}

---

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