jQuery Plugin For HTML5 Video Background - vidbg.js

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

3. Or using JavaScript method like this:

  '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:



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