Youtube Video Background with jQuery Plugin

Category: Layout | August 31, 2019
Author: rochestb
Official Page: Go to Website
Last Update:August 1, 2023

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="//"></script>
<script src="src/jquery.youtubebackground.js"></script>

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

<script src=""></script>

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

  fitToBackground: true, // use as a background video
  videoId: 'YOUR VIDEO ID'

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

  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.

  position: relative;
  background: transparent;
  position: absolute;
  top: 0;
  z-index: -1;


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

ratioratio: 16 / 9intDefine the video ratio dimensions
videoIdLSmgKRx5pBoStringVideo Id: Define the ID of your Youtube Video
mutetruebooleanCan Mutes Youtube Video
width$(window).width()intSet the video width of the container
pauseOnScrollfalsebooleanIncrease performance by Pauses Video During Scroll
repeattruebooleanLoops the Video
fitToBackgroundtruebooleanFits to background vs fitting to the container specified with width
start0intSecond in which video should begin playing at



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


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


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


  • Fixed Youtube Player shield not functioning correctly with default CSS


  • The plugin now works on static sites without server


  • Fixing deffered for times where YT is defined.


  • Fixed multiple video issue.


  • Updated Version.


  • Update jquery.youtubebackground.js


  • Implement destroy functions.


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