Making a Custom YouTube Video Player JQUERY

This is a demo for YouTube API tutorial, in which we show you how to use YouTube’s APIs, to create a custom CSS player for YouTube videos in a form of a jQuery plugin. Embedding videos in your website has never been easier. Just run the following code:

$('#element').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
 
// Or:
 
$('#element').youTubeEmbed({
	video			: 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
	width			: 600, 		// Height is calculated automatically
	progressBar	: false		// Hide the progress bar
});

Changing the play/pause buttons or the progress bar is as easy as changing a couple of CSS values.

At a time user can show multiple player with different videos.Please review below code

$(document).ready(function(){
 
	$('#player').youTubeEmbed("http://www.youtube.com/watch?v=0NcJ_63z-mA")
				.youTubeEmbed('http://www.youtube.com/watch?v=quwebVjAEJA');
 
	$('form').submit(function(){
		$('#player').youTubeEmbed($('#url').val());
		$('#url').val('');
		return false;
	});
 
});

For change the video player height then open youTubeEmbed-jquery-1.0.js file then you find the tag width for re-size the video

		// Default values
 
		var def = {
			width		: 440,
			progressBar	: true
		};

Author: Pavan

I am asp.net developer have good knowledge of Asp.net ver 05,08,10 and good hand in sql server.Proficient in Object Oriented Programming and javascript, jQuery. Achievements - Integrate Spotfire, appnexus API ASP.net with sql server. Hobbies - Blogging ,Games, Movies ,Teaching,Keeping myself update with new technologies