A Minimal Vanilla JavaScript Video Background Plugin | vidbg.js

vidbg.js is a simple vanilla javascript video wallpaper plugin. vidbg is a Vanilla JavaScript library that allows HTML5 video to be used as a background for an element.

With backup image and background overlay support. This library is Vanilla JavaScript’s version of the jQuery vidbg.js plugin.


  • All modern web browsers
  • IE 11+
  • All mobile web browsers that support HTML5 <video> autoplay

Read More – Play Youtube Video Builder in Background in HTML5

How to make use of it:

1. Import the required JavaScript and CSS information into the doc.

$ 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 brand new vidbg occasion, specify the target container component and define the path to the HTML5 video as follows:

<section class="example">
var instance = new vidbg(
    mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
    webm: "path/to/video.webm", // URL or relative path to webm video
    poster: "path/to/fallback.jpg", // URL or relative path to fallback image
    overlay: false, // Boolean to display the overlay or not
    overlayColor: "#000", // The overlay color as a HEX
    overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
    // Attributes

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

// resize the video background

// play the video

// pause the video

// get the playing state

// remove the video

// remove the video background


Setting the Overlay option to true will add an RGBA background to your video. This is useful when you want to display meaningful text or content against the background of a video for increased clarity.

Fallback Image Flashing

You may experience flashing of the backup image when the page loads. This is because the backup image is added through JavaScript. As a result, it will load after the CSS styles are rendered.

Video Background With Fallback And Overlay, vidbg.js Plugin/Github, responsive youtube video background


Lazy Loading Images, Backgrounds, Videos & Iframes | lazyload.js
Play Video In Background Using Youtube Player API

See Demo And Download

Official Website(blakewilson): Click Here

This superior jQuery/javascript plugin is developed by blakewilson. For extra Advanced Usage, please go to the official website.