A repository of over 1000 quality jQuery plugins

jQuery JQuery YoutubeBackground

JQuery YoutubeBackground is a jQuery Audio & Video plugin.

Created by Rochestb

A wrapper for the Youtube API – Great for fullscreen background videos or just regular videos.

Not what you're looking for? Click here to view more Audio & Video jQuery plugins

jQuery.BackgroundVideo V1.0.5

Inspired by [Tubular] (http://www.seanmccambridge.com/tubular/)

Example: http://rochestb.github.io/jQuery.YoutubeBackground 360 Video Example: http://rochestb.github.io/jQuery.YoutubeBackground/360.html

Production Example: [www.cpbgroup.com] (http://cpbgroup.com)

jQuery plugin that lets you create background videos using youtube api

Put the script at the bottom of your markup right after jQuery:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="src/jquery.youtubebackground.js"></script>
<div id="video"></div>

Call the plugin function and your carousel is ready.

    fitToBackground: true,
    videoId: 'LSmgKRx5pBo'

Need to customize some CSS in order to make it a background

 position: relative;
 background: transparent;

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

Works with Youtube Javascript API

Youtube Javascript API Options

Any youtube option must be placed within the playerVars object.

    fitToBackground: true,
    videoId: 'LSmgKRx5pBo'
    playerVars: {
      modestbranding: 0,
      autoplay: 1,
      controls: 1,
      showinfo: 0,
      branding: 0,
      rel: 0,
      autohide: 0,
      start: 59

Access all of YouTube's API events and methods by using player:

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

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


For more details visit our [Documentations Page] (http://rochestb.github.io/jQuery.YoutubeBackground)

Install with Bower

bower install youtube-background-video


[Documentations Page] (http://rochestb.github.io/jQuery.YoutubeBackground)


I welcome contributors, bugs, and questions.

Bug reports

A bug is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!

Guidelines for bug reports:

  1. Use the GitHub issue search — check if the issue has already been reported.

  2. Check if the issue has been fixed — try to reproduce it using the latest develop branch in the repository.

  3. Isolate the problem — ideally create a reduced test case and a live example. This JSFiddle is a helpful template you can fork.

By submitting a patch, you agree to allow the project owner to license your work under the terms of the MIT License.


The code and the documentation are released under the MIT License.

You might also like these other Audio & Video jQuery Plugins

  • articulate.js

    A jQuery plugin that lets the browser speak to you.

  • JqVideoBox

    jqVideoBox is jquery lightbox for videos from Youtube, Metacafe, Google Video, Dailymotion, Blip, Revver, Veoh, Vimeo and more

  • jQuery Video Lightning

    Turn any element into a lightbox or popover link for Youtube and Vimeo videos.