YouTube Chromeless Developer Documentation

Getting Started

Requirements

There are a few requirements you need to meet before you can utilise the YouTube Chromeless Player Plugin. First include the following JavaScript files inside the <head> tag of your page.

jQuery library
jQuery UI extension
SwfObject JavaScript Flash Embed Script
jQuery Hover Intent Plugin
Chromeless Player Plugin

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script src="js/YtChromelessPlayer.js" type="text/javascript"></script>

Then include the following CSS stylesheet. You don’t need to include the jQuery UI style sheet but it must be in your CSS folder because it is imported by the main player stylesheet.

<link rel="stylesheet" type="text/css" href="css/player_style.css">

Installation

Go to YouTube and get the embed code for the video you want (the new iframe code not the old object/embed), and then paste it in into the <body> of your page.

Then finally, to invoke the plugin, include the following JavaScript code in the <head> of the page.

<script type="text/javascript">
$(document).ready(function() {

if (swfobject.hasFlashPlayerVersion("9.0.18")) {
 
 var options = { width : '640',  height: '360', skin : "Dark"};  
 $('iframe[src^="//www.youtube.com/embed/"]').YtChromelessPlayer( options ,function(player){
     player.fadeIn(4000);
     
  }); 
  
}

});
</script>

Above the plugin is invoked, first by testing for Flash support using swfobject and then selecting any YouTube iframes on the page with jQuery and replacing them with the Chromeless player plugin.

Note that the plugin returns a player object – this is the container for the player and can be faded or slided in with jQuery should you so wish. If you do not require animation, simply specify player.show(). You must do this because the container is hidden by default.

Options

In the example above, we pass the plugin only the basic height, width and skin type options. However all of the following are also available:

skin: (string) – there are 5 options available ‘Dark’, ‘Light’, ‘iStyle’, ‘odStyle’ and ‘Custom’. The one that you pass the player upon invocation is the one that it will load with but all others will be available as long as skin_switcher is set to true.
autostart: (boolean) – this is false by default but if set to true will start the video immediately upon page load.
skin_switcher: (boolean) – this is true by default but can be disabled using false so that the player only has the skin that you load it with.
hyperlink: (string) – you can include a custom link for the right panel.
params : JSON object – default is { allowScriptAccess: ‘always’, wmode: ‘opaque’} – These are passed to flash by swfobject upon embed. Please see swfobject documentation for more detailed information.

Styling A Custom Player

By editing player_style.css and replacing the images in the Custom folder, you may customize your own YouTube player with your own company logo, hyperlink, buttons and colour schemes. The Custom skin is currently black and white but can be easily transformed with a little time. Just try to make sure that you use the same image sizes for the player controls so that you don’t break the player layout.