Press "Enter" to skip to content

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 background for an element. With backup image and background overlay support. This library is Vanilla JavaScript’s version of the jQuery vidbg.js plugin.

jquery background video plugin, responsive video banner, responsive video background, background video slider jquery free download, youtube video background autoplay

Compatibility:

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

How to make use of it:

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

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

<section class="example">
  
</section>
var instance = new vidbg(
  ".vidbg-box",
  {
    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
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();

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


See Demo And Download

Official Website(blakewilson): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *