A Simple YouTube API to Create Background Videos | jQuery.YoutubeBackground

Cover for Youtube API – Great for full-screen background videos or just plain videos. Just another jQuery Cover for Youtube API that allows incorporating YouTube video into your webpage as a video background.

How to make use of it:

1. Include the jQuery library and the jQuery Youtube Background plugin on your internet web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="src/jquery.youtubebackground.js"></script>

2. Include the required Youtube API in your internet web page.

<script src="http://www.youtube.com/iframe_api"></script>

3. Create an empty container to position a Youtube video.

<div id="background-video"></div>

4. Call the plugin and add a Youtube video ID within the Javascript.

$('#background-video').YTPlayer({
  fitToBackground: true, // use as a background video
  videoId: 'YOUR VIDEO ID'
});

5. Default choices and settings. You can discover extra Youtube Javascript API choices on this web page.

$('#background-video').YTPlayer({
  ratio: 16 / 9, // usually either 4/3 or 16/9 -- tweak as needed
  videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
  mute: true,
  repeat: true,
  width: $(window).width(),
  wrapperZIndex: 99,
  playButtonClass: 'YTPlayer-play',
  pauseButtonClass: 'YTPlayer-pause',
  muteButtonClass: 'YTPlayer-mute',
  volumeUpClass: 'YTPlayer-volume-up',
  volumeDownClass: 'YTPlayer-volume-down',
  increaseVolumeBy: 10,
  start: 0,
  fitToBackground: true
});

Fullscreen Youtube Video Background Plugin, jQuery Background Video Plugin/Github