Home » Tutorials » JavaScript » Customizing YouTube Player – Lesson 1

Customizing YouTube Player – Lesson 1

Customizing YouTube Player – Lesson 1

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

<script type="text/javascript" src="/path/to/swfobject.js"></script>

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:

<!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>

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.

<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>

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:

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
  • 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:

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

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:

<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>

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!

Other JavaScript Tutorials


  • Voleyee

    Nice tutorial! Can’t wait for the next lesson!

  • Olivier

    It’s really Helpfull, I got good result with this tutorial but I try a lot of codes to load my Playlist from youtube via url or id without succes. Please do you have any way ???

    • Hi Oliver,

      Sorry for late reply. For your problem, did you test your code on a webserver?

      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.

      Hope it helps.

      Regards,
      The Management of onlyWebPro.com

    • Hi Oliver,

      Sorry for late reply. For your problem, did you test your code on a webserver?

      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.

      Hope it helps.

      Regards,
      The Management of onlyWebPro.com

      • Olivier

        Hi onlyWebPro,

        Thank you for your reply.
        I found a way by loading a player showing my playlist, if I call the Youtube Playlist_Id only, this is not working, only Video_Id can be load.
        (It’s testing on line).

      • Hi Olivier,

        Thank you for visiting onlyWebPro.com.

        I have never done by loading the Play List ID into the customize YouTube Player by using the code (YouTube Player API) that I mentioned in this tutorial. And I was wondering whether the API is supporting Play List ID or not.

        Probably you have to use other API other than ‘Player API’ that provided by the YouTube. For your problem, you can find out more about other YouTube APIs at http://code.google.com/apis/youtube/getting_started.html to overcome your problem.

        Sorry that, didn’t provide much solution in helping you to overcome your problem.

        Regards,
        The Management of onlyWebPro.com

      • Olivier

        Hi onlyWebPro,

        You already help me full with your tutorial, one more time thank you for this good job and for your answers.
        (It was the first time I sent message for my troubles).

        Best regards.

Android, iOS Development Tutorials