Customizing

1. Options

All of the options below are available to customize your Youtube Background Player

Variable	Default	Type	Description
ratio	ratio: 16 / 9	int	Sets video ratio dimensions
videoId	LSmgKRx5pBo	String	Video Id: Specifies which Youtube Video
mute	true	boolean	Mutes Youtube Video
width	$(window).width()	int	Expands Video to width of container
pauseOnScroll	false	boolean	Pauses Video During Scroll to help performance
repeat	true	boolean	Loops Video
fitToBackground	true	boolean	Fits to background vs fitting to the container specified with width
start	0	int	Second in which video should begin playing at

How to Instantiate

Instantiate plugin

$('#video').YTPlayer({
    fitToBackground: true,
    //videoId: 'LSmgKRx5pBo'
   videoId: 'uklKhQt208I'
});

Make sure to add some CSS

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

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

2. Callbacks

Example:

$('#background-video').YTPlayer({
  //videoId: 'LSmgKRx5pBo',
  videoId: 'uklKhQt208I',
  callback: function() {
    console.log("playerFinshed");
  }
});
        

Variable	Default	Type	Description
callback	false	function	Once Youtube Player is Ready.

3. Youtube Api

The beauty of this player, is you can rely on the Youtube API

To grab the youtube player:

Example:

var player = $('#background-video').data('ytPlayer').player;
player.pauseVideo();
player.playVideo();

player.addEventListener('onStateChange', function(data){
  console.log("Player State Change", data);
});
        

Leverage Youtubes API's Options

$('#module-video').YTPlayer({
  fitToBackground: false,
  videoId: 'jKCyFB5LmPo',
  pauseOnScroll: false,
  playerVars: {
    modestbranding: 0,
    autoplay: 1,
    controls: 1,
    showinfo: 0,
    wmode: 'transparent',
    branding: 0,
    rel: 0,
    autohide: 0,
    origin: window.location.origin
  }
});
        

For full documentation view Youtube's Api: https://developers.google.com/youtube/js_api_reference