Fully Configurable HTML5 Video Background Plugin With jQuery
File Size: | 68.1 KB |
---|---|
Views Total: | 2410 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.