Video Parallax Background with Javascript & HTML5

BackgroundVideo.js is a vanilla Javascript video parallax background plugin which acts like CSS3 property background-size: cover;.

It’s a lightweight plugin that turns the HTML5 <video> element into a full working parallax section with scaling to aspect ratio.

Did you try many plugins to create parallax effect but none of them work well? Here is a simple and easy solution to your problem.

Now you can easily place an HTML5 video as background in the div container then apply parallax effect by calling the video in the Javascript function.

How to Create Video Background with Parallax Effect

Ensuring that you are referring the plugin file backgroundVideo.js before closing </head> tag in your document to start implementing.

<script src="../dist/backgroundVideo.js"></script>

After that, you need to define the HTML element. Just create a div and place a video tag with class name bv-video. That’s it.

In our case, we have created an HTML5 main element with some fixed height. Then we place a video element inside it. you can change or remove the height as per your need.

<main style="height: 1500px">
    <video class="bv-video"></video>
</main>

Now you can instantiate the plugin by using the following Javascript: Make sure to add all the video formate including .mp4, .webm, .ogg for better browser support.

 <script>
    const backgroundVideo = new BackgroundVideo('.bv-video', {
      src: [
        '../videos/sample.mp4',
        '../videos/sample.webm'
      ],
      onReady: function () {
        // Use onReady() to prevent flickers or force loading state
        const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
        vidParent.classList.add('bv-video-wrap--ready');
      }
    });
  </script>

Adding Multiple Videos with Parallax

The plugin supports adding multiple videos with a parallax effect on the same page. You need to use the call back options to do so.

In other words, To add more than one video on one page, you need to define the video HTML tag with unique classes. Let’s have a look HTML example for adding three videos.

<main>
    <video class="bv-video"></video>
    <video class="bv-video-2"></video>
    <video class="bv-video-3"></video>
</main>

Similarly, you need to write separate Javascript for each video.

<script>
    const backgroundVideo = new BackgroundVideo('.bv-video', {
      src: [
        '../videos/sample.mp4',
        '../videos/sample.webm'
      ],
      onReady: function () {
        // Use onReady() to prevent flickers or force loading state
        const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
        vidParent.classList.add('bv-video-wrap--ready');
      }
    });
    const backgroundVideo2 = new BackgroundVideo('.bv-video-2', {
      src: [
        '../videos/sample.mp4',
        '../videos/sample.webm'
      ],
      onReady: function () {
        // Use onReady() to prevent flickers or force loading state
        const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
        vidParent.classList.add('bv-video-wrap--ready');
      }
    });
    const backgroundVideo3 = new BackgroundVideo('.bv-video-3', {
      src: [
        '../videos/sample.mp4',
        '../videos/sample.webm'
      ],
      onReady: function () {
        // Use onReady() to prevent flickers or force loading state
        const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
        vidParent.classList.add('bv-video-wrap--ready');
      }
    });
</script>

Options

By using the plugin options, you can easily handle the way of working video. You can set the intensity of parallax, disable right-click, adding poster image and few more.

Browser Support

Note: The examples are written in ES6/ES2015 so these will not work in older browsers e.g. Internet Explorer. HTML5 video supported browsers on desktop:

• IE9+ / Edge
• Chrome
• Firefox
• Safari
• Opera

Please note this plugin will not work on mobile devices. This is due to restrictions on autoplay and performance. A responsive image is suggested as fallback.