YouTube Chromeless Video Player –  jQuery Plugin

Trevor Davis, Former Front-End Development Technical Director

Article Category: #Code

Posted on

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();
});

Check out this demo in action

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.

Related Articles