Youtubebackground.js - A Wrapper For The Youtube API

File Size: 220 KB
Views Total: 3256
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Youtubebackground.js - A Wrapper For The Youtube API

jQuery Youtubebackground.js is a wrapper for the Youtube API, great for fullscreen background videos or just regular videos. 360° Videos are supported as well.

How to use it:

1. Download and load the jQuery Youtubebackground.js plugin after the latest jQuery library.

<script src="//"></script>
<script src="src/jquery.youtubebackground.js"></script>

2. Create a container to place the Youtube video.

<div id="demo">
  <img src="placeholder.jpg">

3. Initialize the plugin to embed an Youtube video inside the container you just created.

  videoId: 'VIDEO ID HERE'

4. Make the Youtube video act as a background of your webpage.

  position: relative;
  background: transparent;

.ytplayer-container {
  position: absolute;
  top: 0;
  z-index: -1;

5. Full plugin options and callbacks.


  // video ratio dimensions
  ratio: 16 / 9,

  // video ID
  videoId: 'LSmgKRx5pBo',

  // Mutes Youtube Video
  mute: true,

  // Loops Youtube Video
  repeat: true,

  // Expands Video to width of container
  width: $(window).width(),

  // CSS Classes
  playButtonClass: 'YTPlayer-play',
  pauseButtonClass: 'YTPlayer-pause',
  muteButtonClass: 'YTPlayer-mute',
  volumeUpClass: 'YTPlayer-volume-up',
  volumeDownClass: 'YTPlayer-volume-down',

  // Second in which video should begin playing at
  start: 0,

  // Pauses Video During Scroll to help performance
  pauseOnScroll: false,

  // Fits to background vs fitting to the container specified with width
  fitToBackground: true,

  // Youtube player variables
  playerVars: {
    iv_load_policy: 3,
    modestbranding: 1,
    autoplay: 1,
    controls: 0,
    showinfo: 0,
    wmode: 'opaque',
    branding: 0,
    autohide: 0

  // Callback
  callback: function() {

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