Easy Youtube & HTML5 Video Background Plugin - ultimate-background

Just another video background plugin with jQuery that allows to use Youtube and/or HTML5 videos as covering backgrounds for any containers you specify.

The plugin also provides a function that calculates the optimal width and height of the background div base on the ration 16/9:

• When the div that needs the background is short (height less than 9), then the background will have the width of the div and a calculated height based on ration 16/9. Doing so will avoid black border around videos and image stretches.
• When the div that needs the background is narrow (width is less than 16), then the background will use the height of the div and the width is calculated based on the ratio. A part of the the background is cut off but the video and the image will not be stretched in a different ratio other than the native 16/9.

How to use it:

1. Include the JavaScript ultimate-bg.js after jQuery library and done.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ultimate-bg.js"></script>

2. Call the function on the target container and specify the Youtube vidoe ID or Video paths as these:

$('.container').c47bg({
  type: 'youtube',
  container: 'div',
  source: 'wuY3TAeixus'
});

$('.container').c47bg({
  type: 'self-hosted',
  container: 'div',
  source: {
    mp4: 'bg.mp4',
    webm: 'bg.webm',
    ogv: 'bg.ogv'
  }
});

3. More default plugin settings.

$('.container').c47bg({

  // usually either 4/3 or 16/9 -- tweak as needed
  ratio: 16/9,

  // mute the video
  mute: true,

  // repeat the video
  repeat: true,

  // crop the video
  crop: true

  // body or div. If body, we will set the positioning of the video/image container to fixed, otherwise, set it to absolute
  container: "body",

  // image, self-hosted, youtube
  type: 'youtube'
  
});

---

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