Tutorial Details
- Difficulty: Beginner
- Technology: JavaScript
- Supported Browser: IE, Firefox, Safari, Chrome, Opera
Introduction to customizing YouTube Player
YouTube.com, a world largest video sharing website that hosted over billions of videos posted by the people around the world. YouTube provide a platform for people to share their video to each others, allows advertiser, brands to reach their target audiences and politicians, celebrities to connect with their fans and supporters. As a web designer or web developer, it is quite hard for us to incorporate a default user interface of YouTube player into the designs we created.
The default user interface of the YouTube player
Luckily, YouTube does provide us a solution ‘YouTube API’, which allows us to customize our own YouTube player in the way we like to. Let’s look at how can we customize the player with YouTube API.
Getting Started
The API that we are going to use in this tutorial is called ‘Player API’, its allow developer to control the YouTube chromeless or embedded video players via JavaScript and can made some custom functionality to the video player.
HTML Structure
The SWFObject is recommended when embedding YouTube Video into a website. SWFObject is a JavaScript library that simplifies the process of embedding video into HTML document, it will take care the things for us, example, flash version of end user.
[javascript]
<script type="text/javascript" src="/path/to/swfobject.js"></script>
[/javascript]
Place the SWFObject library as shown above into your document’s head section. Then let’s start embed the YouTube video and play with the Player API. First of all, create the HTML structure for holding your YouTube player. We create a div called ‘ytplayer’ to hold our video and 3 simple buttons to control our video as shown below:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Customize YouTube Player</title>
<script type="text/javascript" src="/path/to/swfobject.js"></script>
</head>
<body>
<div id="ytapiplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>
<a href="#">Play</a>
<a href="#;">Pause</a>
<a href="#">Stop</a>
</body>
</html>
[/html]
That’s all for the HTML structure! Let’s move on to the JavaScript section.
JavaScript
In JavaScript section, what we need to do is embed our YouTube video by using the SWFObject.
[javascript]
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/Video_ID?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
[/javascript]
As you can see above, we have defined 2 variables, which is params and atts. The params contained allowScriptAccess parameter in the code, which is needed to allow the player SWF to call functions on the containing HTML page across different domains; The atts contained the id of our embed object.
In line 4, we used swfobject.embedSWF function to load and embed YouTube video. There are several values need to be put into the function:
[javascript]
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
[/javascript]
- swfUrlStr: The URL of the video, and you must enable JavaScript API by appended the URL with enablejsapi and playerapiid parameters.
- replaceElemIdStr: A HTML div that we created to hold the video.
- widthStr: Width of the video
- heightStr – Height of the video.
- swfVersionStr – The minimum required version of Flash Player
- xiSwfUrlStr – (Optional) Specifies the URL of your express install SWF.
- flashVarsObj – (Optional) Specifies your FlashVars.
- parObj – (Optional) The parameters for the embed object. Normally, set it to the name of the variable of allowScriptAccess.
- AttObj – (Optional) The attributes for the embed object. Normally, set the id to myytplayer.
Ok, save your project and test it in your browser, you should see your video loaded into your webpage. Now, let’s move on to create the function for the 3 buttons that we have defined as shown below:
[javascript]
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}
function play() {
if(ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if(ytplayer) {
ytplayer.pauseVideo();
}
}
function stop() {
if(ytplayer) {
ytplayer.stopVideo();
}
}
[/javascript]
The first function that we have created is called ‘onYouTubePlayerReady’. This function will start when the player is loaded properly and making calls to the API. After that, we create play, pause, and stop functions for the 3 buttons. Remember to create onClick function to the 3 buttons as following:
[html]
<a href="javascript:void(0);" onClick="play();">Play</a>
<a href="javascript:void(0);" onClick="pause();">Pause</a>
<a href="javascript:void(0);" onClick="stop();">Stop</a>
[/html]
That’s it! Save your project, run it in your browser, and you should able to control your video by using the 3 buttons that you created.
Note: To test the project you did, you must have your file running on a webserver, this is because Flash player restricts calls between local files and the internet.
In next tutorial, we will going to customize the UI of the default YouTube player. Stay tune!