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.
<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">
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.
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:
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.