jQuery YouTube player with playlist | WordPress and jQuery tutorials and plugins

Version: 1.0
License: CodeCanyon regular license
Price: $5
Compatible with: IE10, Firefox, Safari, Opera, Chrome

jQuery plugin that allows quick embedding of YouTube videos in any page. It is touch enabled and supports YouTube’s HTML5 player. Has fallback capability from Flash player to HTML5 player in case the first isn’t available. Compatible with all modern browsers and iPhone/iPad.

Features

Touch enabled;
Can create playlist from single YouTube video, user playlist, YouTube playlist or search queries;
Autoplay and loop videos;
Multiple players into the same page;
Displays player status (playing, paused, etc.);
Fallback to HTML5 player in case Flash isn’t available;
Compatible with iPhone/iPad;
All CSS is external;
Autoplay – can play all videos in playlist without user interaction.

Requirements

SWFObject – needed to embed the Flash player into pages;
jQuery UI Slide – needed for playlist scrollbar functionality;
jQuery UI Touch Punch – touch functionality for jQuery UI.

The plugin is fully compatible with WordPress, can be implemented using JavaScript files (jQuery, jQuery UI Slider and Touch Punch) provided by WordPress.

Usage

Place the script files and stylesheet into the head section of your page:

<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.10.1.slider.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script language="javascript" type="text/javascript" src="swfobject.js"></script>
<script language="javascript" type="text/javascript" src="YTV-1.0.jquery.js"></script>
</head>
<!-- rest of page goes below -->

Next thing to do is start the script:

;(function($){
	$(document).ready(function(){
		var playerSettings = {
			videoContainer: '.YTV_playback',
			playlist: {
				selector : '.YTV_playlist',
				scrollbar : '.playlist_container .scrollbar'
			},	
			playerConfig: {
				showRelated: 0,
				showSearch: 0,
				showInfo: 1
			},		
			items			: '.YTV_playlist li a',
			clickStart		: true,
			volume			: 80,
			infoPanel		: '.movie_state',
			togglePlaylist		: '.show_playlist',
			toggleRepeat		: '.playlist_repeat',
			repeatPlaylist		: true,
			playOnLoad 		: false
		};
		// start the video player
		$('.YTV_movies').YTV( playerSettings );			
	})
})(jQuery);

Plugin Parameters

Property	Default	Values	Description
items	null	-	Playlist items selector (single videos or playlists).
playerConfig	Object	-	Object that has 3 keys: showRelated, showSearch and showInfo. By default, all are set to false. These 3 settings control related videos display, search form and video info when player finishes playling the current video.
videoContainer	null	-	CSS selector of video player container. YouTube’s player will be injected inside this element and will have the size it has.
playlist	Object	-	Object having 2 keys: selector and scrollbar. Key selector contains the CSS selector for the playlist and scrollbar key contains the CSS selector where the playlist scrollbar will be injected.
infoPanel	null	-	CSS selector for element that will display the player status (ie: playing, paused and so on).
togglePlaylist	null	-	CSS selector for link that toggles the playlist in/out of view.
toggleRepeat	null,	-	CSS selector for link that toggles playlist repeat on/off.
clickStart	true	true/false	When video is clicked in playlist it can automatically play or load paused. This option controls this behavior.
volume	30	-	For videos that don’t have volume parameter set individually, the volume will have the value set in this parameter.
repeatPlaylist	false	true/false	Will automatically play the next video when current one ends. In case current video has repeat set ON in individual settings this setting will be overrun and current video will play again.
playOnLoad	false	true/false	When set to true, on page load the video set as selected will start playing automatically.
rewindVideo	false	true/false	When current video ends it will rewind to beginning.
forceHTML5Player	false	true/false	By default the plugin will try to first load Flash player and if unavailable, it will load HTML5 player. This can be overrun by setting this parameter true; this will load by default the HTML5 player without testing if Flash is available or not.

Playlist items parameters

Each item in playlist has a set of parameters that are set as a JSON string on anchor rel attribute. There are 4 types of elements: single videos, YouTube playlists, YouTube user playlists and search queries. Below are examples for each type:

1. Individual videos

<a href="#" title="" rel="{'vidId' : 'youtubeVideoId'}">My video</a>

Property	Type	Description
vidId	string	YouTube video ID.
selected	int	Video will be loaded on page load ( 1 ).
repeat	int	After video ends, it will start again ( 1 ) or stop ( 0 ).
volume	int	Video volume ( 0-100 ).
paused	int	Video will be loaded paused ( 1 ) or will play automatically ( 0 ).

2. YouTube user playlist

<a href="#" title="" rel="{'userId' : 'youtubeUserId'}">My user playlist</a>

Property	Type	Description
userId	string	YouTube user ID to pull videos from.
results	int	Number of videos to be retrieved ( no more than 50 – YouTube limitation ).
loadIfNext	int	When repeatPlaylist is on, if the next item in list is playlist and loadIfNext equals to 1, the playlist will be loaded and videos in it played.
autoload	int	On page load query for the playlist and populate with the results ( 1 ).

3. YouTube playlist

<a href="#" title="" rel="{'playlistId' : 'youtubePlaylistId'}">My playlist</a>

Property	Type	Description
playlistId	string	YouTube playlist ID to pull videos from.
results	int	Number of videos to be retrieved ( no more than 50 – YouTube limitation ).
loadIfNext	int	When repeatPlaylist is on, if the next item in list is playlist and loadIfNext equals to 1, the playlist will be loaded and videos in it played.
autoload	int	On page load query for the playlist and populate with the results ( 1 ).

4. YouTube query

<a href="#" title="" rel="{'query' : 'some query'}">My query</a>

Property	Type	Description
query	string	Query to pull YouTube videos for.
results	int	Number of videos to be retrieved ( no more than 50 – YouTube limitation ).
loadIfNext	int	When repeatPlaylist is on, if the next item in list is playlist and loadIfNext equals to 1, the playlist will be loaded and videos in it played.
autoload	int	On page load query for the playlist and populate with the results ( 1 ).

Changelog

1.0

- Initial release