Video Background With Fallback And Overlay – vidbg.js

Category: Javascript | April 19, 2019
Author: blakewilson
Views Total: 228
Official Page: Go to website
Last Update: April 19, 2019
License: MIT


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:

Import the required JavaScript and CSS files into the document.

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

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'

Apply an overlay to the video background.

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

The default attributes for the HTML5 <video> element.

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

You Might Be Interested In:

Leave a Reply