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 }});
});
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)
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
listvariable for embed URLs.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
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
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?
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
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
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!
Thanks for the tips,Drew!
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.
nazanin, you should have a look at the code samples posted by Octavio — they include the thumbnail functionality you require.
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.
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
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
There is no way to control this, Eric. It is the way YouTube formats the embeds.
Sorry for so many comments but I found a workaround such that I substituted /uploads?alt with /favorites?alt