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

2. Create a container to place the Youtube video.

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

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

$('#demo').YTPlayer({
  videoId: 'VIDEO ID HERE'
});

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

#demo{
  position: relative;
  background: transparent;
}

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

5. Full plugin options and callbacks.

$('#demo').YTPlayer({

  // 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() {
    console.log("playerFinshed");
  }
  
});

---

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