Making a Custom
YouTube Video Player

This is a demo for Tutorialzine's 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
});

The plugin uses YouTube's chromeless player, which allows you to build your own player controls. Changing the play/pause buttons or the progress bar is as easy as changing a couple of CSS values.

To test the plugin, fill in a YouTube Video URL in the textbox below and hit "Embed".

(if embedding has been disabled on the video, it will not show up)