BIDEO.JS HTML5 Background Video

BIDEO.JS is A JS library that makes it super easy to add fullscreen background videos.

Features:

Resizing

The video element in use will automatically adapt to the container's dimensions. It will also resize as the browser window resizes.

Overlay

Plugin doesn't supports any overlay as it is easy to implement that with plain HTML/CSS in your code.

Video Cover

Video might take a few seconds to load, especially because the sources are added via JS which is something you'll load after the DOM's loading. Till then you may want to show a video cover which'll be same as the first frame or the video (or some other image).

The support for this is not in the plugin as it's fairly simple to achieve this via just HTML/CSS (just like overlays). Check the demo!

Source: github.com

1. INCLUDE JS FILE

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

2. HTML

<video id="background_video" loop muted></video>
<div id="video_cover"></div>
<div id="overlay"></div>

<div id="video_controls">
      <span id="play">
        <img src="play.png">
      </span>
      <span id="pause">
        <img src="pause.png">
      </span>
</div>

3. JAVASCRIPT

(function () {

  var bv = new Bideo();
  bv.init({
    // Video element
    videoEl: document.querySelector('#background_video'),

    // Container element
    container: document.querySelector('body'),

    // Resize
    resize: true,

    // autoplay: false,

    isMobile: window.matchMedia('(max-width: 768px)').matches,

    playButton: document.querySelector('#play'),
    pauseButton: document.querySelector('#pause'),

    // Array of objects containing the src and type
    // of different video formats to add
    src: [
      {
        src: 'night.mp4',
        type: 'video/mp4'
      },
      {
        src: 'night.webm',
        type: 'video/webm;codecs="vp8, vorbis"'
      }
    ],

    // What to do once video loads (initial frame)
    onLoad: function () {
      document.querySelector('#video_cover').style.display = 'none';
    }
  });
}());