Jquery Youtube Background Video

YouTube API to create background videos

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

2. Callbacks

Example:

$('#background-video').YTPlayer({
  videoId: 'iNJdPyoqt8U',
  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: 'iNJdPyoqt8U',
  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

Use plugin for regular videos as well!