HTML5 jQuery Video Background plugin.

If you plan on using Vidbg.js with Wordpress, make your life a little bit easier and download the plugin I made on the Wordpress Repo.

• All modern web browsers
• IE9+
• Video will play on desktops and laptops and will resort to the fallback image (poster) on mobile devices (tablets, phones, etc.)

To get started, download the script. Once you have downloaded the script, include it in your project:

<script src="vidbg.min.js"></script>

There is two ways to initialize the script; from HTML, and from javascript. Both methods will be shown below.

<div class="vidbg-box" style="width: 650px; height: 338px;"
  data-vidbg-bg="mp4: http://example.com/video.mp4, webm: path/to/video.webm, poster: path/to/poster.jpg"
  data-vidbg-options="loop: true, muted: true, overlay: true">
</div>

$('.vidbg-box').vidbg({
  'mp4': 'http://example.com/video.mp4',
  'webm': 'path/to/video.webm',
  'poster': 'path/to/fallback-image.png',
}, {
  // options
});

It is important to note that supplying both .webm and .mp4 will highly increase browser compatibility and it is highly recommended.

{
  volume: 1,
  playbackRate: 1,
  muted: true,
  loop: true,
  position: '50% 50%',
  resizing: true,
  overlay: false,
}

When resizing is set to true (default) the video will resize automatically when the window is expanded or compressed.

Setting overlay to true will add a faint pattern over your video. This is helpful when your video is primarily white and you have white text on top. overlay is set to false by default.

Vidbg.js is licensed under The MIT License. You can view it here.