How to Embed Your YouTube Channel as a Playlist

Update: There is an undocumented ID of your channel playlist which is available in the current beta version of YouTube UI as described by Federico in the comments.

For some reason YouTube doesn’t offer a simple way to embed your YouTube channel. The only official method is to manually create a playlist with all your videos and embed that. However, it requires additional work after every upload which is not cool, especially if you’re on a mobile. Here is a simple script that creates an HTML5 (iframe) player using the YouTube API:

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no" frameborder="no">');
            ifr.addClass('player');
            if (options.playeropts)
                ifr.attr(options.playeropts);
        }
        var src = 'http://www.youtube.com/embed/' + video;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src+= k + '=' + options.playopts[k] + '&';
            }
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }

    var defoptions = {
        autoplay: false,
        user: null,
        player: createPlayer,
        playeropts: {},
        loaded: function() {},
        playopts: {
            fs: 1,
            showinfo: 1,
            modestbranding: 1
        }
    };

    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            var allopts = $.extend(true, {}, defoptions, options);
            $.getJSON('http://gdata.youtube.com/feeds/api/users/' + allopts.user + '/uploads?alt=jsonc&v=2', null, function(data) {
                var videos = [];
                var playlist = '';
                $.each(data.data.items, function(i, item) {
                    videos.push(item.id);
                    if (i > 0)
                        playlist += item.id + ',';
                });
                allopts.playopts.playlist = playlist;
                allopts.player(md, videos[0], allopts);
            });
        }
    });

})();

$(function() {
    $('#player').youTubeChannel({user:'kasparsdambis', playeropts: { width: 400, height: 280 }});
});

16 Comments

  1. Actually YouTube offers it, it’s just not easily found or not documented, I had to try a few things before finding the right URL. Here’s the link for the iframe:
    http://www.youtube.com/embed/?list=UUJgvVfUp1e7WTk_5FW7QyAg

    Now all channels are playlists, you can get the playlist ID from the “Play All” button in the new channel page (screenshot with cosmic panda)

    • Kaspars says:

      Thanks for the tip, Federico! I discovered this a few minutes after publishing this post. Turns out they use the same encoded user id for thumbnail images on the current version of channel pages but there is no official documentation about the list variable for embed URLs.

  2. Jim says:

    Thanks Federico and Kaspars. This was exactly what I was looking for. Once you switch to the cosmic panda, I couldn’t find the PLAY ALL link. I had to change the settings a little:

    Edit My Channel > Featured Tab > “Blogger” style layout.

    That may be just for me though, I have over 1200 videos…

    Thanks again,

    Jim

  3. CJ says:

    Question, Does this only work for those who have “Uploaded” videos, or will it include all playlists you have on your channel?

    Also, are there more detailed directions on adding your personal info to the JavaScript?

    Thx,
    CJ

  4. Octavio says:

    Hi and thanks for the info.

    I found this additional link that was created by the person you referenced in your article, which is a full jquery youtube player.

    http://jsfiddle.net/SimoneGianni/NmvA9/

    What it does create a player that features not the various playlists but the “uploaded videos” from a youtube channel. Simply change the user name (channel name) at the bottom of the script from (in that example) “youtube” to what ever e.g. NDdotEDU, which is Notre Dame’s youtube channel.

    In that example the feed is derived from their uploads

    http://www.youtube.com/user/NDdotEDU/videos

    and the feed to those uploads located here http://gdata.youtube.com/feeds/api/users/NDdotEDU/uploads

    But I have a question – In addition to uploads there are “playlists” which are a combination of uploaded and/or external videos. The link that Frederico provided is able to access the playlists, which do not use the “user/channel name” but instead the playlist ID.

    Here is an example of a feed of one of the playlists from the NDotEDU channel

    http://gdata.youtube.com/feeds/api/playlists/B32C4DFCD1DC4D65

    This also works on Frederico’s link

    http://www.youtube.com/embed/?list=PLB32C4DFCD1DC4D65

    But I cannot get it to work on the jsfiddle / SimoneGianni player , which is a really nice product as it works on ipad etc and is light weight.

    any ideas please?

  5. Octavio says:

    further to my above post and Frederico’s suggestion I found this documentation

    https://developers.google.com/youtube/player_parameters#controls

    This allows the player to be embedded but unlike the SimoneGianni player it does not work on Android or iPhone/Pad

  6. Octavio says:

    Sorry for so many comments but I found a workaround such that I substituted /uploads?alt with /favorites?alt

    and then populated my favorites list on my channel with the content I want to show in the player

    works perfectly though finding a way to use playslists would be preferred thanks
    Octavio

  7. Drew Waller says:

    Very useful – only problem is getJSON fails in (shock) IE.

    Changed it to an ajax() GET with a dataType: ‘jsonp’and it works fine.

    Also sliced the trailing comma off the playlist string – (allopts.playopts.playlist = playlist.slice(0,-1);) in the extend function to be on the safe side!

  8. nazanin says:

    Hello Kaspars ;
    Thank you for your code.
    But i have a question.
    Is there any way that you can get all the playlists with their thumbnail as well?

    I have a channel with different playlists.
    I select the categories and run the videos by the playlists id.

    But if i add a playlist into my channel, i have to add the playlist-id inside my code,
    is there possible to get all the playlist-id numbers just with a name of the channel?
    Thanks a lot in advance.

  9. Kaspars says:

    nazanin, you should have a look at the code samples posted by Octavio — they include the thumbnail functionality you require.

  10. nazanin says:

    Thank you Kaspars for your answer.
    Infact; I found a very interesting code in
    http://www.yvoschaap.com/youtube.html
    Then I write my code in the way that if you select the channel you will have the video thumbnails –(exactely like you used in this page’s code) — I gave the user channel as well ofcours.
    Then if we choose a playlist we will have videos thumnails.
    But each time i had to enter the playlist code .

    “So” if we add a video in any of the playlists ; this will be added to our site , but if we add another playlist , we wont see it and we have to add it manually.

    So i was interested to know if we can add only “user name’s channel” and then get the “playlists id” within the channel.

  11. Afsal says:

    nazanin,
    Yes, he is the solution for you…. Read this blog post, i hope it will help you http://a2zbloggerz.blogspot.com/2012/09/embeded-youtube-playlist-with.html

  12. Eric says:

    I created a YouTube playlist with the list on the right side vertically and generated the html code (Share – Embed) but when I pasted in my other website’s html editor, the playlist is below the screen harizontally, not on the right side. How come? How can I make the list appear on the right side? Thanks

  13. williamfran says:

    Sorry for so many comments but I found a workaround such that I substituted /uploads?alt with /favorites?alt

Leave a Reply to Kaspars Cancel reply