jQuery Plugin For HTML5 Video Background With Fallback Image - vidbacking

vidbacking is a responsive, cross-platform jQuery video background solution that allows an HTML5 video or Youtube Video to be used as a background for a container or the whole webpage.

The plugin will display a fallback image (typically a poster image) in case the current browser doesn't support HTML5 videos.

How to use it:

1. Include the vidbacking plugin's JavaScript and CSS files on the webpage where the jQuery library is properly loaded.

<link rel="stylesheet" href="jquery.vidbacking.css" type="text/css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="dist/jquery.vidbacking.js"></script>

2. Embed an HTML5 video or Youtube Video into the webpage.

<video poster="poster.jpg" autoplay muted loop class="vidbacking">
  <source src="sample.mp4" type="video/mp4">
</video>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO-ID-HERE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen  class="vidbacking"></iframe>

3. Make the video fullscreen and act as the background for the whole page.

$('body').vidbacking();

4. You can also apply the video background to a container element you specify.

$('.container').vidbacking();

5. If you want to display a mask overlaying the background video.

$('.container').vidbacking({
  'masked': true
});

6. Change the opacity of the mask & video.

$('.container').vidbacking({
  'video-opacity': '1',
  'mask-opacity': '1'
});

Changelog:

2021-10-13

• v2.1.0: video pause issue fixed

2018-05-07

• v2.0: supports Youtube videos.

2017-08-04

• pause video when out of viewport

---

This awesome jQuery plugin is developed by souravm84. For more Advanced Usages, please check the demo page or visit the official website.