Coderbay Essential Resources For Web Developers & Designers
Follow Coderbay
Subscribe to RSS-feed Follow Coderbay on Google Plus

jQuery YouTube Plugin – TubePlayer

Posted on January 17, 2013

YouTube has a very rich API to integrate YouTube videos in your web project. But you have to spent a reasonable time to configure YouTube player in your project. If you have much expertise with Jquery, jQuery TubePlayer plugin provides an easy way to integrate YouTube video player.

TubePlayer has a very rich API to configure latest YouTube player. you can configure the player with little effort. Download the js from the link given below and call the tubeplayer method.

jQuery("#container").tubeplayer({
	initialVideo: "DkoeNLuMbcI"
}); 

tubeplayer can accept a object of options to have a full control over youtube video player. The default options and events are listed below.

jquery_youtube_plugin_tubeplayer.jpg

TubePlayer API

width: 425, // the width of the player
height: 355, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: "DkoeNLuMbcI", // the video that is loaded into the player
start: 0, 
preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
showControls: 1, // whether the player should have the controls visible, 0 or 1
showRelated: 0, // show the related videos when the player ends, 0 or 1 
autoPlay: false, // whether the player should autoplay the video, 0 or 1
autoHide: true, 
theme: "dark", // possible options: "dark" or "light"
color: "red", // possible options: "red" or "white"
showinfo: false, // if you want the player to include details about the video
modestbranding: true, // specify to include/exclude the YouTube watermark
// the location to the swfobject import for the flash player, default to Google's CDN
wmode: "transparent", // note: transparent maintains z-index, but disables GPU acceleration
swfobjectURL: "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
loadSWFObject: true, // if you include swfobject, set to false
// HTML5 specific attrs
iframed: true, // iframed can be: true, false; if true, but not supported, degrades to flash
// Player Trigger Specific Functionality
onPlay: function(id){}, // after the play method is called
onPause: function(){}, // after the pause method is called
onStop: function(){}, // after the player is stopped
onSeek: function(time){}, // after the video has been seeked to a defined point
onMute: function(){}, // after the player is muted
onUnMute: function(){}, // after the player is unmuted
// Player State Change Specific Functionality
onPlayerUnstarted: function(){}, // when the player returns a state of unstarted
onPlayerEnded: function(){}, // when the player returns a state of ended
onPlayerPlaying: function(){}, //when the player returns a state of playing
onPlayerPaused: function(){}, // when the player returns a state of paused
onPlayerBuffering: function(){}, // when the player returns a state of buffering
onPlayerCued: function(){}, // when the player returns a state of cued
onQualityChange: function(quality){}, // a function callback for when the quality of a video is determined
// Error State Specific Functionality
onErrorNotFound: function(){}, // if a video cant be found
onErrorNotEmbeddable: function(){}, // if a video isnt embeddable
onErrorInvalidParameter: function(){} // if we've got an invalid param

Enjoyed This Post? Share with others:

Digg this | stumble | del.icio.us | reddit.com | DZone

Leave a Reply

Your email address will not be published. Required fields are marked *