I’m back with you after a long silence.
The system is based on the excellent tutorial by Martin Angelov (http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/). The players include the button play / pause, a clickable progress bar, duration time and elapsed time, mute button and volume control.
<link rel=”stylesheet” href=”../css/jquery.customYtPlayer.css” type=”text/css”>
Finally, apply the plugin to any link where you entered the url to a youtube video using the jQuery selectors (for example “a.youtube”).
<a href=”http://www.youtube.com/watch?v=CD2LRROpph0″ style=”width: 480px;”></a>
And that’s it! The system will replace the link with the player.
By default, the plugin sets the width to 640px (the height is calculated based on the width), but you can easily set the width using css (eg by setting the attribute style = “width: 480px;”).
The code is commented, and then, I think, will be easy to understand and modify it as needed.
Thanks for the community that is helping the improvement of this little piece of code and, in particular, thanks to Martin Angelov (the code for this plugin is based largely on his tutorial). And of course a big thank you to my muse. Thanks Rebecca Black. Your creative effort has been like a lighthouse.
I test the script on few browser: IE6+, FF3+, Safari 4+ for Win and Google Chrome. Any warning about other browsers are appreciated.
You can download script and example from here.
You are free to use the script and report me all bugs. As usual I apologize for my English and… Good luck!