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('https://www.youtube.com/watch?v=u1zgFlCw8Aw');
// Or:
$('#element').youTubeEmbed({
video : 'https://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".