jQuery Plugin For HTML5 Video Background - vidbg.js

Yet another jQuery video background plugin which allows HTML5 videos to be used as backgrounds on specific containers, with a fallback to background image on legacy browsers.

Fullscreen Demo

How to use it:

1. Include jQuery library and the vidbg jQuery plugin on the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/vidbg.js"></script>

2. Add an Html5 video background to a container using HTML5 data attributes.

<div data-vidbg-bg="mp4: 1.mp4, webm: 1.webm, poster: 1.jpg" 
         data-vidbg-options="loop: true, muted: true">
</div>

3. Or using JavaScript method like this:

$('.container').vidbg({
  'mp4': '1.mp4',
  'webm': '1.webm',
  'poster': '1.jpg',
}, {
  // Options
  muted: true,
  loop: true,
});

4. Configuration options with default values.

volume: 1,
playbackRate: 1,
muted: true,
loop: true,
autoplay: true,
position: '50% 50%',
overlay: false,
overlayColor: '#000',
overlayAlpha: 0.3,
resizing: true

Change log:

2016-06-27

• JS update

2016-03-19

• Cleanup. Added hex to rgb converter for easier color input.

---

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