Youtube Video Background with jQuery Plugin

Previously, we shared a solution of creating HTML5 video background with Javascript but today we make a jQuery plugin which works with Youtube videos.

It’s a jQuery wrapper for Youtube API which allows you to embed a series of Youtube videos on your web page. The video will work as a background and you can easily make it fullscreen as well.

Another great feature of this plugin support 360 videos. So if you are looking to build a high-quality video services site then you can surely go with this plugin.

The plugin comes with tons of features and optoins which allow you to easily customize it as per your development need.

How to Make Youtube Video Background with jQuery

The first step to add jQuery library and jQuery Youtube Background plugin on your web page before closing </head>tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.youtubebackground.js"></script>

Also, Include the required Youtube API in your web page.

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

Instantiate plugin through Javascript function and add a Youtube video ID.

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

Default options and settings. You can find more Youtube Javascript API options

$('#backgroundvideo').YTPlayer({
  ratio: 16 / 9, // usually either 4/3 or 16/9 -- tweak as needed
  videoId: 'LSmgKRx5pBo', // 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
});

The Styles

Make sure to add some CSS style to make it work.

#backgroundvideo{
  position: relative;
  background: transparent;
}
.ytplayer-container{
  position: absolute;
  top: 0;
  z-index: -1;
}

Options

You can easily customize the plugin by using below options to make work the Youtube background player as you want.

Changelog:

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

• The 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

• Updated Version.

2014-10-08

• Update jquery.youtubebackground.js

2014-10-07

• Implement destroy functions.

2014-09-24

• Fade-in  Animation Added.
• Add moving to css model.
• Fixed Memory Leak Cleanup