Fullscreen Youtube Video Background Plugin with jQuery

Just another jQuery wrapper for Youtube API that allows to embed a YouTube video into your web page as a video background.

See also:

• Fullscreen Background Video Plugin For jQuery - BigVideo
• jQuery Plugin For Fullscreen YouTube Video Backgrounds - tubular
• Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer
• 10 Best Video Background Plugins

Basic Usage:

1. Include jQuery library and the jQuery Youtube Background plugin in your 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 web page.

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

3. Create an empty container to place an Youtube video.

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

4. Call the plugin and add an Youtube video ID in the Javascript.

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

5. Default options and settings. You can find more Youtube Javascript API options on this 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
});

Changelog:

2018-09-18

• Fixing position issue if used as fit background

2018-09-18

• Removing one line of code that plays the video automatically instead of letting the YouTube API determine if the video should autoplay or not based on the playerVars value for autoplay that is passed in.

v1.0.5 (2016-05-17)

• upgrading version and adding 360° video support.

2015-12-22

• fix video's vertical centering when its height is greater then container's

2015-10-14

• adding Call back example, fixing fadeout, fixing cross origin error on example call

2015-09-18

• Fixed Youtube Player shield not functioning correctly with default CSS-

2015-05-28

• plugin now works on static sites without server

2015-01-23

• fixing deffered for times where YT is defined

2014-12-14

• fixed multiple video issue.

2014-10-15

• Update version

2014-10-08

• Update jquery.youtubebackground.js

2014-10-07

• adding destroy functions

2014-09-24

• adding fade in css
• moving to css model

---

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