Video Background With Fallback And Overlay – vidbg.js

Category: Javascript | April 13, 2021
Views Total:1,387 views
Official Page:Go to website
Last Update:April 13, 2021


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 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">
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
// play the video
// pause the video
// get the playing state
// remove the video
// remove the video background


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.

You Might Be Interested In:

Leave a Reply