Responsive Fullscreen Background Video In Pure JavaScript – bideo.js

bideo.js is an easy and lightweight JavaScript library which allows you to use any Html5 video as a fullscreen background for your webpage. Fully responsive design and features page overlay & video cover.

How to use it:

Create an empty video element on the webpage.

<video id="background_video" loop muted autoplay></video>

Create a fullscreen overlay that will cover the background video (Optional).

<div id="overlay"></div>

Create a DIV container to place the video cover.

<div id="video_cover"></div>

Load the JavaScript bideo.js library at the bottom of the webpage.

<script src="bideo.js"></script>

Make the background video always be centered whenever you resize the window.

#background_video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

Add a background image to the cover container.

#video_cover {
  position: absolute;
  width: 100%; height: 100%;
  background: url('cover.png') no-repeat;
  background-size: cover;
  background-position: center;
}

Style the fullscreen overlay.

#overlay {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

Initialize the bideo.js and specify the video path/type you want to play.

(function () {
  var bv = new Bideo();
  bv.init({
    // Video element
    videoEl: document.querySelector('#background_video'),
    // Container element
    container: document.querySelector('body'),
    // Resize
    resize: true,
    // Array of objects containing the src and type
    // of different video formats to add
    src: [
      {
        src: 'mov_bbb.mp4',
        type: 'video/mp4'
      }
    ],
    // What to do once video loads (initial frame)
    onLoad: function () {
      document.querySelector('#video_cover').style.display = 'none';
    }
  });
}());