jQuery Plugin For HTML5 Video Background With Fallback Image - vidbacking

File Size: 3.6 MB
Views Total: 4358
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
<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.


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


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

  'masked': true

6. Change the opacity of the mask & video.

  'video-opacity': '1',
  'mask-opacity': '1'



  • v2.1.0: video pause issue fixed


  • v2.0: supports Youtube videos.


  • 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.