YouTube Chromeless Video Player – jQuery Plugin
While building the PUMA Running site, I had the opportunity to work with the YouTube JavaScript Player API to build a custom video player. This was something that we had to reuse in various places, so I made a jQuery plugin out of it (with a little help from Doug Avery to be able to add multiple videos per page). The functionality is pretty simple: you get a play/pause button, a status bar, and a mute/unmute button; but this plugin gives you control over how those things look.
Requirements
Getting Started
What you need to get going with the plugin is simply a link to the video:
<a href="http://www.youtube.com/watch?v=sxUjB3Q04rQ" class="video-link">Bolt Arms - Around the World</a>
It is important that the URL to your video is formatted like the example above because the plugin grabs the video ID out of the URL, and then replaces the link with a video player.
Options
Here are all of the options with their defaults:
- videoWidth : '640'
- videoHeight : '360'
- videoIdBase : 'ytplayer'
- params : { allowScriptAccess: 'always', wmode: 'transparent' }
Example
Pretty easy, just call the function on the links that you want to replace with videos (and pass in whatever options you want to change):
$(document).ready(function() {
$('a.video-link').ytchromeless();
});
The CSS is pretty straightforward, and I am not expecting anyone to use it exactly like the demo, so I don't think it is worth discussing here.
Download
I'm not sure what additional functionality people would want, but let me know if there is something that you would love to have, and I'll see if it's something I'd like to add.
You can download both the full and minified versions on Github.
Next entry: Ping-Ponging the Design Share 3 Invite
Previous entry: Put Your Portfolio Online
2010