Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer

Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer
File Size: 3.18 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

YTPlayer is a jQuery plugin that allows you to use a youtube video as the background of your web page using html5 data-* attributes and youtube API. You can also use this plugin as a normal video player for your web page. 

See also:


$ npm install jquery.mb.ytplayer

# Bower
$ bower install jquery.mb.ytplayer

Basic Usage:

1. Include jQuery framework and jQuery YTPlayer on the page

<script src=""></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>

2. Include jQuery YTPlayer CSS to style your player

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

3. Call the plugin


4. Initialize a YTPlayer as background.

<a class="player" data-property="{videoURL:'BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1}">My video</a> 

5. All of the options can be simply set by using data-* attributes.

// (string) the CSS selector of the DOM element where you want the video background; 
// if not specified it takes the “body”;
// if set to “self” the player will be instanced on that element.
containment: "body",

// ‘4/3’, ‘16/9’ or ‘auto’ (string) to set the aspect ratio of the movie; 
// if ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
ratio: "16/9",

videoURL: null,

playlistURL: null,

// Set the seconds the video should start at.
startAt: 0,

// Set the seconds the video should stop at. If 0 is ignored.
stopAt: 0,

// true (boolean) or false play the video once ready.
autoPlay: true,

// set the volume level of the video.
vol: 100,

// Show or hide a raster image over the video.
addRaster  : false,

// Set the opacity of the player;
opacity: 1,

// or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”
quality: "default", 

// mute the audio;
mute: false,

// true (boolean) or false loops the movie once ended.
loop: true,

// show or hide the player controls;
showControls: true,

showAnnotations: false,

// Show or hide the YT logo and the link to the original video URL.
showYTLogo : true,

stopMovieOnBlur: true,

// activate the new HTML5 full screen behavior.
realfullscreen : true,

// activate the Google Analytics event tracker for that player.
gaTrack: true,

optimizeDisplay : true,

onReady: function (player) {}

6. API.

// change the video of the specified player

// play the video

// pause the video

// stop the video

// switch video from background to front

// change the video volume

// mute the audio

// unmute the audio

// switch from mute to unmute

// retrive the original player returned by the YouTube API

// Returns the info data of the current video as JSON.

// Available only if you are playing a video list; 
// goes to the next video in the play list.

// Available only if you are playing a video list; 
// goes to the previous video in the play list.

More examples:

Change Logs:

v3.2.1 (2018-05-30)

  • Release v3.2.1 stable
  • Fixed Unified handling of options (javascript parameters) and properties (html attribute)
  • Added comments to options
  • Working on playOnlyIfVisible property
  • Bug fix: options where redefined cross video
  • Bug fix: if there were more then one player the options where inconsistent
  • Bug fix: the coverImage were not displayed correctly

v3.1.13 (2018-04-07)

  • Added "cc_load_policy" to activate subtitles
  • Change property name from "backgroundImage" to "coverImage"
  • bugfix: cover image path
  • working on: playOnlyIfVisible

v3.1.12 (2018-01-31)

  • Release v3.1.12 stable

v3.1.11 (2018-01-28)

  • Release v3.1.11 stable
  • Bug fix: options were overwritten by last player initialized

v3.1.9 (2018-01-24)

  • Bug fix: if the place holder was the target video was not displayed
  • Bug fix: Fixed a bug that was preventing the correct behavior if the "Remember last video time position" was checked.
  • fixing a bug if multiple player are initialized on the page the properties are of the last player initialized

v3.1.8 (2018-01-19)

  • Release v3.1.8 stable

v3.1.6 (2018-01-17)

  • Release v3.1.6 stable

v3.1.5 (2018-01-16)

  • the optimizeADisplay function evaluate the "abundance" as a percentage of the iframe height instead of a fixed value
  • Code refactor and start working on playlist compatibility
  • Improvements: working on applying filter easily from the options
  • Layout changes for demo pages

v3.1.2 (2017-11-17)

  • Added the playOnlyIfVisible option that make the video play only if it is on screen
  • Better performance on video start up
  • Bug fix: on Android devices the 'playsInline' property test return false preventing the video player to run

v3.1.1 (2017-10-08)

  • fix a terrible bug that was preventing controls to work as aspected
  • bug fix: controls didn't work anymore
  • various fix for mobile compatibility
  • various updates for the demos and playOnlyIfVisible

v3.1.0 (2017-09-27)

  • Working on mobile compatibility
  • checking the 'playsInline' property of the video element to manage the mobile background video if allowed
  • fixed the poster image resolution for inline players

v3.0.20 (2017-08-19)

  • iOs fix
  • YTPlayer.start_from_last: set cookie time to 0 to clear cookie on session close
  • Working on mobile compatibility

v3.0.19 (2017-05-12)

  • OS detection for mobile fix

v3.0.18 (2017-05-11)

  • Various fix

v3.0.17 (2017-05-06)

  • Various fix

v3.0.16 (2017-04-26)

  • Various fix

v3.0.15 (2017-04-24)

  • Various fix

v3.0.14 (2017-04-19)

  • Various fix

v3.0.12 (2017-04-05)

  • the stop event is .5 sec before the real (before was 1.5)

v3.0.12 (2017-03-02)

  • Various fix

v3.0.11 (2017-02-22)

  • Various fix

v3.0.10 (2017-01-08)

  • Various fix

v3.0.8 (2016-07-26)

  • Various fix

v3.0.6 (2016-07-07)

  • Various fix
  • added YTPPlayIndex method to play a specific video in a playlist using YTPPlaylist
  • update and fix for jQuery 3.0.0

v3.0.3 (2016-06-10)

  • Various fix
  • added several new methods to get video state

v3.0.1 (2016-05-20)

  • worked on filters methods

v3.0.0 (2016-03-27)

  • Various fix

v2.9.5 (2016-03-11)

  • added mask methods and demo page

v2.9.13 (2016-02-06)

  • minor bug fix

v2.9.11 (2016-01-21)

  • minor bug fix

v2.9.10 (2016-01-09)

  • minor bug fix

v2.9.9 (2016-01-07)

  • Working on speed up st start

v2.9.8 (2015-12-08)

  • new feature: loop videos in playList

v2.9.5 (2015-10-25)

  • bugfix on dropdown action event

v2.9.4 (2015-10-08)

  • update + various fix

v2.9.3 (2015-06-28)

  • update + various fix
  • Changes on: getDataFromAPI method

v2.9.0 (2015-05-09)

  • updating to YT API 3 for video DATA. - set the apikey private (not available in the package)
  • Better control to check if the video is ready to play


  • v2.8.5


  • various code refactor


  • added blur filters


  • added volume control and filters

v2.8.0 (2015-01-31)

  • various fix

v2.7.9 (2015-01-12)

  • various fix

v2.7.8 (2014-12-14)

  • various changes

v2.7.5 (2014-11-16)

  • various fix

v2.7.2 (2014-08-23)

  • various fix

v2.7.0 (2014-08-19)

  • major update,

v2.6.9 (2014-06-23)

  • mute / unmute bug fix

v2.6.8 (2014-06-23)

  • various fix

v2.6.7 (2014-05-13)

  • various fix

v2.6.6 (2014-03-31)

  • various fix

v2.6.3 (2014-03-19)

  • various fix

v2.6.2 (2014-01-28)

  • various fix

v2.6.0 (2013-11-24)

  • updated to the latest version

v2.5.9 (2013-11-21)

  • updated to the latest version

v2.5.8 (2013-11-13)

  • various fix

v2.5.7 (2013-08-31)

  • Added real fullscreen
  • various fix

v2.5.4 (2013-05-31)

  • fixed a bug for IE that prevented the changeMovie to work

v2.5.2 (2013-05-31)

  • various fix


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