Lightweight HTML5 Video Background Plugin with jQuery

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

Yet another lightweight jQuery background video plugin which allows you to use an HTML5 video as a covering background for any container.


$ 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">

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 { 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="//"></script>
<script src="jquery.background-video.js"></script>

4. Active the plugin to play the background video on page load.


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' 



  • Added iOS 10+ support


  • prevent pausePlayButton in iOS



  • Don't assume poster will be set


  • Further refinements to scaling.


  • Bug fixes - better responsive scaling, allowed reading of pauseAfter time in data attribute.


  • 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.