Jquery Youtube Background Video

A simple wrapper for the YouTube API to create background videos

Now with 360 video support!


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

    fitToBackground: true,
    videoId: 'LSmgKRx5pBo'

Make sure to add some CSS

  position: relative;
  background: transparent;

  position: absolute;
  top: 0;
  z-index: -1;

2. Callbacks


  videoId: 'LSmgKRx5pBo',
  callback: function() {
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:


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

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

Leverage Youtubes API's Options

  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

Use plugin for regular videos as well!