// jQuery Plugins // jqChromelessYoutube

The jqChromelessYoutube is a jQuery plugin that embeds the 'Chromeless' Youtube player. The plugin accepts a Youtube playlist ID as a parameter and plays that playlist continuously. Other parameters allow you to show/hide the titlebar, controls, and playlist itself.

Demo

Version history

Version 1.4:

fixed: CSS positioning for html overlays

Version 1.3:

added support for partially loading youtube playlists
added support for loading playlists dynamically

Version 1.2:

now removes unsupported clips from the playlist (also known as media$content undefined bug)
added a maxResult config parameter to determine the maximum number of items in the playlist

Version 1.1:

Fixes for usage with Internet Explorer 8.x

Version 1.0:

initial release

Requirements

The plugin requires two libraries in order to work:

Download

Note: the included sample file does not work from the filesystem, it should be run from a webserver.

Usage

The easiest way to setup this plugin is by including the "jqChromelessYoutube.js" script file and calling the "ChromelessYoutube" method, eg:

		<script type="text/javascript" src="jqChromelessYoutube.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
		    $("#cyPlayer").ChromelessYoutube();
		});
		</script>
		<div id="cyPlayer"></div>

This will initialize the element with id "cyPlayer" to embed the Chromeless Youtube player, with some default options. The default options are:

		{ 
		    width: 640,
		    height: 360,
		    playlistWidth: 260,
		    playlistID: '021B87CCA16D5E96',
		    highdef: 1, // 1 for high-def, 0 for default
		    showPlaylist: true,
		    showTitle: true,
		    showControls: true,
		    maxResults: 50 // if there are more items than this value in the youtube playlist, the playlist will use partially loading automatically and display "previous" and "next" links in the playlist. Note: the maximum is 50
		}

These options can be overridden by passing one or more of the above options with your values to the "ChromelessYoutube" method, for instance you'd like to have the player a size of 320x180 and play the playlist with ID "9889EDDE99D5388B":

		$("#cyPlayer").ChromelessYoutube( { width: 320, height: 180, playlistID: '9889EDDE99D5388B' } );

CSS styling

The default CSS styles you should use are:

		#cyPlayer 
	    {
	        font-family: Tahoma, Arial, Verdana;
	        font-size: 8pt;            
	    }
	    #cyPlayer #playlistContainer 
	    {
	        background-color: black;
	        filter: alpha(opacity=70);
	        -moz-opacity: 0.7;
	        -khtml-opacity: 0.7;
	        opacity: 0.7;
	        color: white;
	        display: block;
	    }
	    #cyPlayer #playlistContainer ul
	    {
	        list-style-type: decimal-leading-zero; 
	    }
	    #cyPlayer #playlistContainer li a
	    {
	        outline-style: none;
	        color: White;
	        text-decoration: none;  
	        display: block;       
	    }
	    #cyPlayer #playlistContainer li a:hover
	    {
	        background-color: silver;
	        color: Black;
	    }    
	    #cyPlayer #playlistContainer li.active a
	    {
	        color: Yellow;
	    }
	    #cyPlayer #titleContainer
	    {
	        background-color: black;
	        filter: alpha(opacity=70);
	        -moz-opacity: 0.7;
	        -khtml-opacity: 0.7;
	        opacity: 0.7;
	        color: white;
	        overflow: hidden;
	        display: block;
	    }
	    #cyPlayer #titleContainer #label
	    {
	        font-weight: bold;
	        padding: 3px 5px 0px 5px;
	    }
	    #cyPlayer #controllerContainer
	    {
	        background-color: black;
	        filter: alpha(opacity=70);
	        -moz-opacity: 0.7;
	        -khtml-opacity: 0.7;
	        opacity: 0.7;
	        color: white;
	        overflow: hidden;
	        display: block;
	    }
	    #cyPlayer #controllerContainer ul
	    {
	        margin: 0;
	        padding: 1px 0 0 0;
	        line-height: 18px;
	    }
	    #cyPlayer #controllerContainer li
	    {
	        list-style-type: none;
	        display: inline;
	        padding-left: 2px;
	        
	    }
	    #cyPlayer #controllerContainer a 
	    {
	        outline-style: none;
	        color: silver;
	        padding: 2px 10px 2px 10px;
	        text-decoration: none;
	        font-weight: bold;
	        line-height: 18px;
	    }
	    #cyPlayer #controllerContainer a:hover 
	    {
	        color: black;
	        background-color: White;    
	    }
	    #cyPlayer #playlistnavigation
	    {
	        margin-top: 10px;
	        width: 200px;
	    }
	    #cyPlayer #playlistnavigation #next
	    {
	        display: block;
	        width: 50px;
	        float: right;
	    }
	    #cyPlayer #playlistnavigation #previous
	    {
	        display: block;
	        width: 50px;
	        float: left;
	    }
	    #cyPlayer #playlistnavigation a
	    {
	        outline-style: none;
	        color: silver;
	        padding: 2px 10px 2px 10px;
	        text-decoration: none;
	        font-weight: bold;
	        line-height: 18px;
	    }
	     #cyPlayer #playlistnavigation a:hover 
	    {
	        color: black;
	        background-color: White;    
	    }

These may be changed to your likings.

Plugin methods

The plugin exposes a few methods which gives you some control of the player. To get access to these methods do the following:

		var cyPlayer = $("#cyPlayer").ChromelessYoutube();
		cyPlayer.next();                            //plays next item in the playlist
		cyPlayer.previous();                        //play previous item in the playlist
		cyPlayer.play();                            //resumes the player from a paused state
		cyPlayer.pause();                           //pauses the player
		cyPlayer.mute();                            //mutes audio
		cyPlayer.unmute();                          //unmutes audio
		cyPlayer.load('021B87CCA16D5E96');          // loads playlist with ID = 021B87CCA16D5E96
		cyPlayer.loadAndPlay('021B87CCA16D5E96');   //loads playlist with ID = 021B87CCA16D5E96 and starts playing the first item