Lightweight HTML5 Video Background Plugin with jQuery
File Size: | 8.76 KB |
---|---|
Views Total: | 8097 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another lightweight jQuery background video plugin which allows you to use an HTML5 video as a covering background for any container.
Installation:
# NPM $ npm install jquery-background-video --save # Bower $ bower install jquery-background-video
Basic usage:
1. Add HTML5 videos with a poster image to the container.
<div class="container jquery-background-video-wrapper"> <video class="my-background-video jquery-background-video" loop autoplay muted poster="poster.jpg"> <source src="small.mp4" type="video/mp4"> <source src="small.webm" type="video/webm"> <source src="small.ogv" type="video/ogg"> </video> </div>
2. The required CSS / CSS3 styles.
/** * Set default positioning as a fallback for if the plugin fails */ .jquery-background-video-wrapper { position: relative; overflow: hidden; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .jquery-background-video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 50%; left: 50%; -o-object-fit: contain; object-fit: contain; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /** * Fade in videos * Note the .js class - so non js users still * see the video */ .js .video-bg video { opacity: 0; } .js .video-bg video.is-playing { opacity: 1; } /** * For demo */ .container { width:100%; height:300px;}
3. Place jQuery library and the jQuery background video plugin at the end of the document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="jquery.background-video.js"></script>
4. Active the plugin to play the background video on page load.
$('.my-background-video').bgVideo();
5. Add a fade in effect to your background video when it starts playing.
.element-with-video-bg { background-image: url(poster.jpg); }
$('.my-background-video').bgVideo({fadeIn: 500});
6. Full plugin options
// Sets the video to be fixed to the full window fullScreen: false, // Milliseconds to fade video in/out (0 for no fade) fadeIn: 500, // Seconds to play before pausing (0 for forever) pauseAfter: 120, // For all (including manual) pauses fadeOnPause: false, // When we've reached the pauseAfter time fadeOnEnd: true, // Show pause/play button showPausePlay: true, // left|right|center pausePlayXPos: 'right', // top|bottom|center pausePlayYPos: 'top', // pixels or percent from side - ignored if positioned center pausePlayXOffset: '15px', // pixels or percent from top/bottom - ignored if positioned center pausePlayYOffset: '15px'
Changelog:
2018-08-30
- Added iOS 10+ support
2017-10-12
- prevent pausePlayButton in iOS
2017-05-30
- JS update
2017-01-13
- Don't assume poster will be set
2015-10-09
- Further refinements to scaling.
2015-10-08
- Bug fixes - better responsive scaling, allowed reading of pauseAfter time in data attribute.
2015-10-05
- Added more options.
This awesome jQuery plugin is developed by BGStock. For more Advanced Usages, please check the demo page or visit the official website.