How to Discover Channel IDs with the YouTube Data API

JS Bin on jsbin.com

Editor's Note: The interactive window above is an embedded "Bin," the canonical version of which can be found o JSBin. It offers you the ability to experiment with the sample code in place (no need to cut and paste it to your own environment). You can change the HTML, the CSS, and/or the Javascript and any changes you make will be reflected in the Output pane on the right hand side (the resulting web page). Go ahead and play with it! You can't hurt it. Try resizing the panes by clicking and dragging their vertical borders. If you click the JSBin button in the top left hand corner, it will give you the ability to edit the Bin over on JSBin.com. If you click the Save button next to it, it will give you the opportunity to clone the same Bin under your own JSBin account. Whether you're working in the embedded version or on JSBin's site, you can view the Bin's Console. There are five buttons at the top-center of the interactive window above. Each button toggles the corresponding pane on and off. Note that this feature may not work 100% in some browser's private browser windows.

This is the third part of our series on How to Develop With the YouTube Data API. In part two we showed you how to display all of a channel's playlists programmatically by only knowing the channel ID. Using this, you can query the YouTube Data API in order to discover all the playlist IDs.

In part two of our series working with the YouTube Data API, we showed you how to display a YouTube channel's playlists programmatically as long as you knew the channel ID. In this tutorial we will show you how to get a listing of a YouTube user's playlists by only needing to know a YouTube username.

In part two, since we had the channel ID, we could easily build the linked header using the username and channel ID. This time though, we only have the username so we have to rely on the API to get the channel ID. Here we need to make a call to the /channels resource to determine the channel ID which in turn lets us get the channel's playlists. The API call looks like below

$.get("https://www.googleapis.com/youtube/v3/channels/", { 
    'part': 'snippet, id',                              
    'forUsername': youTubeUserName,                         
    'key': localStorage.getItem("storedApiKey") },

One thing to remember is that there can be multiple channels associated with a single user ID. To simplify the code, we decided to focus on the first channel. Further extension of the code could let the user select which channel they want to work with.

Using a callback function, we can get the channel ID of the first channel. From there we can begin to construct the linked page header much like we did in part two. The difference this time is that we look for the channel ID of the first channel. We also use the channel name for the first channel using data.items[0].snippet.title.

function(data) {                                   
    var localChannelId = data.items[0].id;           
    document.getElementById("youtubeChannelName").innerHTML =               
    "<h1>YouTube Channel: va href='http://www.youtube.com/channel/"     
    + localChannelId + "' target = '_newtab'>"                        
    + data.items[0].snippet.title + "</a></h1>"; 

The remaining part of the code is the same as we built in part two. The other extension to this code would be to create a dialog box that allows the user to input the YouTube username for which they want to display the playlists.

One thing we learned from this exercise is that YouTube's Data API does not return the full URI's for things like YouTube channels, playlists, and playlist items. It only returns the IDs of those items. If those URI's are needed (for example, to link some text like we've done), the developer must learn exactly how YouTube formats its URI's (there are different base URLs for channels, playlists, and playlist items) and then construct those hyperlinks based on those formats and the IDs that are returned from the API calls. This is not only painful, but brittle. For example, if YouTube changes any of its URL structures (which it has done in the past), your app will depend on the successful redirection of the old URL to continue working. Such redirections are not guaranteed to work and can introduce latency. What would have been better is if the YouTube Data API just returned the full URL of the resource.

 

Comments (0)