- The "html.push" can be tweaked to the desired layout, which will be injected into the "youtube" div tag, following the script.
- With the ajax section, the "url" attribute needs to be adjusted to match the desired YouTube channel.The only variable within the url is the YouTube user id, which can be verified using Google's instructions here.
Here's the full code to make it all happen!
<script type="text/javascript">
function show_my_videos(data){
html = ['<ul id="youtube-videos" style="list-style-type:none">'];
$(data.feed.entry).each(function(entry){
url = this.link[0].href;
url_thumbnail = this.media$group.media$thumbnail[3].url;
var description;
try
{
description = this.media$group.media$description.$t;
}
catch(err)
{
description = '';
}
html.push('<li><table style="width:250px;"><tr><td colspan=2></td></tr><tr><td style="vertical-align:top"><a href="'+url+'" target="_blank">');
html.push('<img src="'+url_thumbnail+'" alt="'+description+'" style="border:1px white solid">');
html.push('</a></td><td style="font-size:8pt">'+description+'</td></tr><tr><td colspan=2 style="border-bottom:1px white solid"> </td></tr></table></li>');
});
html.push('</ul>');
$("#youtube").html(html.join(''));
}
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/api/users/[YouTube User ID]/uploads?alt=json-in-script&format=5",
cache: false,
dataType:'jsonp',
success: function(data){
show_my_videos(data);
}
});
</script>
<div id="youtube" style=""></div>
Example, as rendered in page:
No comments:
Post a Comment