The jQuery TubePlayer Plugin was originally created in July 2010. The plugin is a jQuery wrapper around the YouTube Player API. It has evolved over time and is still the simplest interface to control and manage YouTube Player(s).
The plugin allows developers to focus on functionality as opposed to infrastructure around the YouTube player. The plugin exposes meaningful methods that are triggered based on state changes from the player API. The plugin also provides events that can be triggered on it allowing developers to create a customized player remote, programmatically control videos, gain access for analytics purposes and much more.
(!) Want to see the TubePlayer in action? Check out the demo here.
Download the production version or the development version.
In your web page:
The plugin offers four main interfaces:
See each section below to find the particular information you’re looking for.
When initializing a YouTube player using TubePlayer, you will provide various properties that can be used to customize the behavior and UX of the player. For more details about the properties, and their possible values, check out the YouTube’s official documentation.
Here are the properties, their default values, a description and the expected type(s) of data:
| Purpose | Property | Type | Default Value |
| Player Width | width |
Number | 480 |
| Player Height | height |
Number | 270 |
| Allow Full Screen | allowFullScreen |
Boolean | "true" |
| Playlist (e.g. [“<v_id1>”, “v_id2”]) | playlist |
Array | null |
| Initial Video ID | initialVideo |
String | "DkoeNLuMbcI" |
| Start Time (seconds) | start |
Number | 0 |
| Preferred Quality | preferredQuality |
String | "default" |
| Show Player Controls | controls |
Number | 1 |
| Show Related Videos | showRelated |
Boolean | false |
| Play inline (for Mobile) | playsinline |
Boolean | false |
| Auto Play Video | autoPlay |
Boolean | false |
| Color | color |
String | "red" |
| Show Video Information | showinfo |
boolean | false |
| Modest Branding | modestbranding |
Boolean | true |
| Show Closed Caption Annotations | annotations |
Boolean | true |
| Loop playback continuously | loop |
Number | 0 |
| Protocol | protocol |
String | window.location.protocol |
When you explicitly invoke the TubePlayer to execute a particular action – e.g. “mute” – there are certain callbacks that can be defined to globally handle such actions. In the case of the “mute” action, for example, there is an “onMute” function.
Here are the custom actions:
| Purpose | Action | Arguments | Response |
| Get the options used to create the player object. | opts |
None | Object |
| Cue a video | cue |
“<VideoId>” | None |
| Cue a list of video’s using IDs | cuePlaylist |
{playlist: [“<VideoID1>”], index:0, startSeconds:0} | None |
| Load the player with a video and/or play. | play |
1. None 2. “<VideoID>” 3. {id: “<VideoID>”, time: <StartSecs>} |
None |
| Load the player with a list of videos and play. | playPlaylist |
1. [“<VideoID>”] 2. {playlist: [“<VideoID>”], time:0, index:0} |
None |
| Play the next video if a playlist has been defined. | next |
None | None |
| Play the previous video if a playlist has been defined. | previous |
None | None |
| Play a video at a particular index in the playlist. | playVideoAt |
<Index e.g. 0> | None |
| Pause the player. | pause |
None | None |
| Stop the player. | stop |
None | None |
| Seek within the video loaded. Seconds or “hh:mm:ss”. | seek |
1 (GET). <Seconds e.g. 30> 2 (SET). “00:30” |
None |
| Kill the audio. Mute the player. | mute |
None | None |
| Re-enable audio. Unmute the player. | unmute |
None | None |
| Check to see if the player is actively muted. | isMuted |
None | Boolean |
| Get the volume of the player. | volume |
1 (GET). None 2 (SET). <Volume between 0-100> |
1. Number 2. None |
| Read and tune the video quality. | quality |
1 (GET). None 2 (SET). “<QualityLevel>” |
1. String 2. None |
| Read and adjust the rate of playback for the video. | playbackRate |
1 (GET). None 2 (SET). <Rate between 0-2> |
1. Number 2. None |
| Obtain information about the video and the player. | data |
None | Object |
| Get the video ID for the actively playing video. | videoId |
None | String |
| Set the size of the video player. | size |
{width: <Pixels>, height: <Pixels>} | None |
| Destroy the video player. | destroy |
None | Null |
| Return the actual YTPlayer object | player |
String | YTPlayer Object |
Each callback listener’s context (e.g. this) is the tubeplayer object. For example, within the callback, you could ask for the players data by invoking this.tubeplayer("data").
Here are the event callbacks, to be specified when initializing the player:
| Purpose | Property | Argument |
Play request. When tubeplayer("play") has been called |
onPlay |
videoID:string |
Pause request. When tubeplayer("pause") has been called |
onPause |
|
Stop request. When tubeplayer("stop") has been called |
onStop |
|
Seek request. When tubeplayer("seek", <val>) has been called |
onSeek |
time:int |
Mute request. When tubeplayer("mute") has been called |
onMute |
|
UnMute request. When tubeplayer("unmute") has been called |
onUnMute |
There are events that are initiated from the player itself, for example – when the actual player starts playing, or pauses, or perhaps begins buffering. Moreover, the player can throw errors, like when a video couldn’t be loaded, or it’s not allowed to be embedded in websites.
Here are the non-error based events, to be specified when initializing the player:
| Purpose | Property | Argument |
| Player has cued a video, or playlist and has yet to be played. | onPlayerUnstarted |
|
| Player has ended video play. | onPlayerEnded |
|
| Player has started playing. | onPlayerPlaying |
|
| Player has been paused. | onPlayerPaused |
|
| Player is in buffering mode; get data for more info. | onPlayerBuffering |
|
| Player has cued a video. | onPlayerCued |
|
| Player has loaded and is attached to the DOM. | onPlayerLoaded |
|
| Player video quality has changed. | onQualityChange |
quality:string |
| Player playback rate has changed. | onRateChange |
rate:int |
Here are the error based events, to be specified when initializing the player:
| Purpose | Property |
| Video cannot be found. | onErrorNotFound |
| Video owner does not permit the embedding of this video in other websites. | onErrorNotEmbeddable |
| Something bad happened: the player found an invalid input. | onErrorInvalidParameter |
Lastly, it is worth noting that there are a few methods available at a global level, to interact with the players during various stages in their lifecycle.
Here are the global methods:
| Purpose | Function to execute or override |
| Get all the instantiated YouTube players through TubePlayer. | $.tubeplayer.getPlayers() |
| Interact with the player once it has been attached to the DOM. | $.tubeplayer.defaults.afterReady = function($player){} |
| Alter the tubeplayer internally defined defaults. | $.tubeplayer.defaults.settings |
| Constants for YouTube Player States. | $.tubeplayer.TubePlayer.State |
| Constants for YouTube Error States. | $.tubeplayer.TubePlayer.Error |
v2.1.0 – Dec 2, 2016
v2.0.0 – Dec 2, 2016
playlist propertyshowControls is no longer a boolean – the property is controls now: 0=none, 1=immediate, 2=lazyautoHide has been deprecated and is no longer usedtheme has been deprecated; players always use the dark themeorigin (window.location.origin)v1.1.7 – Sept 24, 2013
v1.1.6 – May 2, 2013
v1.1.5 – Apr 29, 2013
v1.1.0 – Oct 1, 2012
v1.0.4 – Nov 12, 2011
v1.0.3 – Aug 14th, 2011
v1.0.2 – Aug 3rd, 2011
v1.0.1 – May 14th, 2011
Special thanks to @Branden Smith for the first few fixes
v1.0.0 – Feb 13th, 2011
v0.9.4 – Sept 5th, 2010
v0.9.3 – Aug 20, 2010
v0.9.2 – Aug 10, 2010
v0.9.1 – July 30, 2010
v0.9.0 – July 24, 2010