Custom YouTube playlist player Tutorial

You can use the You Tube API to create a custom skin for a You Tube player on your site. You can also display your entire playlist, let your users pick a video and then play it. You can customize how that will look, make a full list of a paged list with prev/next buttons, whatever you want!
Click here to see example of what we are going to end up with.

For this tutorial, you will need to understand html, css, xml, xslt, javascript and jquery. You will also need to understand how to do an xsl transformation of an xml file. This tutorial is not about how to write code to read an xml file and do xsl transformations, you will need to learn that on your own. This tutorial is about how to use the You Tube xml and, using css and javascript, create something custom you can use on your website. That said, I have written a very basic tutorial on how to do a transform in .net and c#, but for other languages you are on your own. As it is beyond the scope of this tutorial, I have no source code for you to download to do the transformation.

Let’s get started!

First, you need to either create or find a You Tube playlist and get the playlistID. You can find it in the URL of the playlist page. Example, the following url is for a playlist I created:

http://www.youtube.com/watch?v=uYbBc2cmiYQ&feature=mh_lolz&list=PLCAD57D4FFE9CE352

At the end you see list=PLCAD57D4FFE9CE352. The playlist id is the part after &list=PL. So in this case it is CAD57D4FFE9CE352.

You can also get a feed to list all of a You Tube users playlists using a URL of the format:

http://gdata.youtube.com/feeds/api/users/username/playlists?v=2

Just change out username to the one you want. Example: http://gdata.youtube.com/feeds/api/users/espn/playlists?v=2 will show you all of ESPN’s playlists. When you view that xml, each entry node is a playlist. The first node under entry is id which contains the playllistID for that node, which is DF76BF248A5FC8BF.

<entry gd:etag="W/"DEUCSH47eCp7ImA9WhZVEkg."">
<id>tag:youtube.com,2008:user:espn:playlist:DF76BF248A5FC8BF</id>

Note – if you have an rss reader in your browser, it will translate these xml feeds for you. You will need either need to disable it or save the page source to a file to see the xml.

Once you have the playlist id, you can grab the xml for that playlist at a url of the format:

http://gdata.youtube.com/feeds/api/playlists/playlist?v=2

Change playlist to the playlist id. Example: http://gdata.youtube.com/feeds/api/playlists/DF76BF248A5FC8BF?v=2

You can get all sorts of information about the playlist. In this tutorial I will be focusing on getting some info on the videos, and that is under each entry node.

Next page describes the layout used in this example.

Bookmark and Share
loans