Responsive Html5 Video Background Plugin with jQuery - VideoBackground.js
File Size: | 531 KB |
---|---|
Views Total: | 12937 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.