Dynamic Background Video Slideshow In JavaScript

Category: Javascript | June 11, 2020
Views Total:1,703 views
Official Page:Go to website
Last Update:June 11, 2020


Dynamic Background Video Slideshow In JavaScript


Just another responsive full-size background video library that automatically plays the next one when the current video playback is finished.

How to use it:

1. Download the package and import the backgroundVideo as a module.

import backgroundVideo from './background-video.js';

2. Create a container in which you want to place the background video.

<div id="video_container"></div>

3. Create a ‘cover’ container to display a cover image before the video is ready to play.

<div id="video_cover"></div>
#video_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('cover.jpg') no-repeat;
  background-size: cover;
  background-position: center;

4. Initialize the backgroundVideo and specify an array of HTML5 videos for backgrounds.

const VIDEO_CONTAINER = document.querySelector('#video_container');
const VIDEO_COVER = document.querySelector('#video_cover');
new backgroundVideo({
    container: VIDEO_CONTAINER,
    src: [{
        src: '1',
        types: ['mp4'],
        src: '2',
        types: ['mp4'],
        src: '3',
        types: ['mp4'],
        src: '4',
        types: ['mp4'],
    onLoad: () => VIDEO_COVER.style.display = 'none'

You Might Be Interested In:

Leave a Reply