Simplest Youtube Video Background Plugin For jQuery - rsBackVid

rsBackVid is a simple yet customizable jQuery plugin which allows you to use an Youtube video as a fullscreen background for your webpage by using Youtube iframe API. The Youtube video background will auto play on page laod, with a fallback to an image or a fixed color on mobile devices.

How to use it:

1. Load the jQuery rsBackVid plugin after jQuery library but before you close the body tag.

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

2. Call the plugin and specify the Youtube video ID to create a fullscreen video background for your web page.

$('body').backVid({
  videoId: "9d8wWcJLnFI"
});

3. Specify the fallback for mobile devices.

$('body').backVid({
  videoId: "9d8wWcJLnFI",
  mobileBackgrounType: 'image',
  backgroundValue: 'poster.jpg'
});

4. All customization options with default values.

$('body').backVid({

  // either 4/3 or 16/9 
  ratio: 16/9, 

  // Video ID
  videoId: '9d8wWcJLnFI', 

  // mute sound
  mute: false,

  // repeatable
  repeat: true,

  // width
  width: $(window).width(),

  // CSS classes for controls
  playButtonClass: 'backVid-play',
  pauseButtonClass: 'backVid-pause',
  muteButtonClass: 'backVid-mute',
  unMuteButtonClass: 'backVid-unMute',
  volumeUpClass: 'backVid-volume-up',
  volumeDownClass: 'backVid-volume-down',

  // The amount to increment/decrement the volume by
  increaseVolumeBy: 10,

  // either image/colour
  mobileBackgrounType: 'colour', 

  // either hex,RGB/Image URL
  backgroundValue: 'rgb(0,0,0)', 

  // either false/lines/bricks/squares/waves/spots/dashes/crosses
  videoFilter: false, 

  // The position to being the video at in seconds
  start: 0
  
});

---

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