Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 28 commits ahead, 5 commits behind AnuragMishra:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


YoutubePlayer is a JavaScript wrapper for YouTube's flash player that provides a simple interface for listening to the video playback events from YouTube's JavaScript API. You can add multiple videos on the page by creating an object of YoutubePlayer for each video, and can subscribe to events on that object. You can also also listen to the video time to launch events to happen at certain moments of a video.

Thanks to James Coglan for coming up with some great ideas on overcoming the limited Flash-JavaScript communication offered by the YouTube APIs with a very well designed interface. Thanks to Anurag Mishra for putting together the initial release.Thanks to Ryan Schneider for providing code to customize the player.


See a demo of the script at It was also used in West Virginia University's 2011 Holiday Card project.


Include YoutubePlayer.js and its dependency SWFObject.

<script src=""></script>
<script src="YoutubePlayer.js"></script>

For each video that is to be embedded on the page, add a placeholder div element on the page and give it an id.

<div id="inception"></div>
<div id="easyA"></div>

To replace the placeholder div with the actual flash player, simply instantiate an object of YoutubePlayer and pass it the id of the placeholder div and the id of the Youtube video.

var inceptionTrailer = new YoutubePlayer('inception', '66TuSJo4dZM');
var easyATrailer = new YoutubePlayer('easyA', 'DL7W6pEuAW0');

YoutubePlayer takes an optional 3rd object parameter to overload the default behavior:

var inceptionTrailer = new YoutubePlayer('inception', '66TuSJo4dZM', {
    width: 640,
    height: 360,
    objparams: { allowFullScreen: "true" },
		ytparams: { rel: 0, showinfo: 0 },
    attrs:  { class: 'ytembed' }

All fields are optional, the defaults will be used if not included. 'ytparams' are for the YouTube Embedded Player Paramters.

To listen to playback events, add a handler to the above objects for the supported events.

inceptionTrailer.on('paused', function() {
	alert("Paused Inception's trailer");

easyATrailer.on('playing', function() {
	alert("Started playing Easy-A's trailer");

To listen to time events, add a handler to the above objects for the supported events.'5000', function() {
	alert("You're five seconds into the Inception trailer.");

List of Supported Events Using videoObj.on

Any of these events can be combined simply by referencing them once and separating with a single comma.


List of Supported Events Using

single time (ex. 5000 for 5 seconds)
combined times with a single comma (ex. 5000,6000,7000 to run the same function at 5 seconds, 6 seconds, and 7 seconds respectively)
a range of times with a dash (ex. 5000-7000 to run the same function at the optional interval. defaults to 500ms)


This library depends on the SWFObject library for embedding videos on the page. See the source code and documentation for SWFObject.

Google Code provides a hosted version of the library which can be included (compressed)

or (uncompressed)


A JavaScript interface to Youtube Flash Player






No releases published


No packages published


  • JavaScript 100.0%