Video Background With Fallback And Overlay – vidbg.js

vidbg.js is a Vanilla JavaScript library which allows an HTML5 video to be used as the background of an element. With fallback image & background overlay support.

This library is the vanilla  JavaScript version of the jQuery vidbg.js plugin.

How to use it:

1. Import the required JavaScript and CSS files into the document.

# NPM
$ npm i vidbg.js

import vidbg from "vidbg.js";

<link href="dist/vidbg.css" rel="stylesheet">
<script src="dist/vidbg.js"></script>

2. Create a new vidbg instance, specify the target container element and define the path to the HTML5 video as follows:

<section class="example">
  
</section>

var instance = new vidbg('.example', {
    mp4: 'media/mp4_video.mp4',
    webm: 'media/webm_video.webm',
    poster: 'media/fallback.jpg'
})

3. Apply an overlay to the video background.

var instance = new vidbg('.example', {
    overlay: true,
    overlayColor: '#03A9F4',
    overlayAlpha: 0.8
})

4. The default attributes for the HTML5 <video> element.

const defaultAttributes = {
      autoplay: true,
      controls: false,
      loop: true,
      muted: true,
      playsInline: true
}

5. API methods.

// resize the video background
instance.resize();
// play the video
instance.playVideo();
// pause the video
instance.pauseVideo();
// get the playing state
instance.isVideoPlaying();
// remove the video
instance.removeVideo();
// remove the video background
instance.destroy();

Changelog:

v2.1.0 (04/13/2020)

• rewritten the project in TypeScript
• Added tests
• Added new methods to the script: playVideo(), pauseVideo(), isVideoPlaying(), and getEl()

v2.0.1 (04/07/2020)

• Fix autoplay issue in Safari.
• Autoplay attribute was removed. Auto play not relies fully on the playPromise.
• Better error handling.