Fullscreen Youtube Video Background Plugin with jQuery

File Size: 221 KB
Views Total: 21656
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.

  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.

  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



  • Fixing position issue if used as fit background


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


  • plugin now works on static sites without server


  • fixing deffered for times where YT is defined


  • fixed multiple video issue.



  • Update jquery.youtubebackground.js


  • adding destroy functions


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