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.

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.