Posted 12.03.2009

Importing a YouTube Feed using jQuery

To import a YouTube Feed, using jQuery, you’ll need a few things:

I know it seems like a lot, but it really will make things a whole lot easier.

The jQuery Google Feed Plugin makes use of Google’s Feed API, so that the content in the feed is easy to access (and understand). The jQuery HowTo blog has some great documentation, if you want to read up, or use it in conjunction with another Google project.

The jYouTube jQuery Plugin takes a YouTube video URL or ID and gives you a thumbnail corresponding with that video.


Our Logic

  • Use jQuery Google Feed plugin to read our YouTube Feed.
  • From the information we get out of the plugin, get the URL, pass it to the jYouTube Plugin. So we can show it on our site.

First things First

Obviously, you’ll need to include all of the JavaScript files in the header of your HTML:


<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jgfeed.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jyoutube.js" type="text/javascript" charset="utf-8"></script> 

All of the JQuery we’re writing will go in the $(document).ready(function() { }); so that it will run as soon as the page loads.

If you look at the documentation on the Google Feed plugin page, you’ll pass in the RSS feed and a callback function. (A callback function is just a fancy name for caboose. It will run as soon as the first function is finished.)

In this particular instance, I’m going to use my favorites feed:
http://gdata.youtube.com/feeds/base/users/amyhaywood/favorites?client=ytapi-youtube-user&v=2

Then, in the callback function, we’re going to pass in feeds. This is the content that we just got. So far, this is what our code looks like:


<script type="text/javascript" charset="utf-8">
    $(
document).ready(function() $.jGFeed('http://gdata.youtube.com/feeds/base/users/amyhaywood/favorites?client=ytapi-youtube-user&v=2', function(feeds{
            
            
        }
);
    
});
</script> 

So far, so good.

Next, let’s make sure that the feed actually loaded. If it didn’t, there’s no use in running unnecessary code and throwing errors.

So, if there wasn’t a feed if(!feeds), return nothing return false;.

Next, let’s set up a container to hold our code. We’re going to be building an HTML string that will contain our feed.


var html ''

Now here’s the fun part. We’re going to create a loop that will cycle through all the items in our feed. For each item, it will get the thumbnail and link to that video.

The easiest way to to implement this is with the for loop.

For programming newbies:

You pass in 3 parameters to a for loop. The first parameter, initializes your counter. Typically, you want your counter to start at 0. var i=0;

The second parameter, tells you how many times you want the loop to cycle. Since, we want it to cycle through all the items in our feed, we’ll tell it to go into it reaches the end, or length of our feed. feeds.entries.length

The last, and final parameter, tells it how to update the counter at the end of 1 iteration: we want it to advance by 1 i++.


for(var i=0i<feeds.entries.lengthi++)

Wait a second, where did feeds.entries.length come from? Well, check your documentation. Feeds is the parameter that we passed into our function. Entries is an array that contains all our entries (surprised)? And length is part of jQuery. It tells us how many items are in our array. Or, in this case, how many entries we have.

We can also get individual values for each of our entries, accessing the feeds.entries. In fact, the next part of our code does that. We look at each entry (feeds.entries) to find it’s link and title, plugging the values into the appropriate places in the HTML string.


var entry feeds.entries[i];
    
html += '<a href="' entry.link '" title="' entry.title '"><img src="' + $.jYoutube(entry.link'small') + '" class="thumb left"></a>'

As you’ll see, we added a call to jYouTube, which grabs our image path. All we do is pass in the link. Or, here, I passed in “small” in the second parameter. This is optional. If I didn’t pass in small, it would have given me the large image, by default.

We’re almost there! After we’re done running the loop, we just have to display the HTML that we wrote. Here, I told it to put the HTML in a div container with an ID of you_tube_feed, but this could be whatever your little heart desires.

Here’s our final code:


<script type="text/javascript" charset="utf-8">
            $(
document).ready(function() {            
                
$.jGFeed('http://gdata.youtube.com/feeds/base/users/threadsmedia/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile',
                function(
feeds){
                    
// Check for errors
                    
if(!feeds){
                        
// there was an error
                        
return false;
                    
}

                    var html '';

                    // do whatever you want with feeds here
                    
for(var i=0i<feeds.entries.lengthi++){
                        
var entry feeds.entries[i];
                        
html += '<a href="' entry.link '" title="' entry.title '"><img src="' + $.jYoutube(entry.link'small') + '" class="thumb left"></a>';
                    
}

                    $('#you_tube_feed').html(html);
                
}4);
            
});
        
</script></i


Not too shabby. Saturday, we’ll be looking at what it takes to display a Flickr Feed, using jQuery.


  • http://jonobr1.com/ jonobr1

    Thanks for the tutorial. Have you tried doing this with Vimeo? I can’t seem to find in their documentation what the proper feed URL to pull is.

  • Amy

    @jonobr1 Yes! I wrote a tutorial about displaying a Vimeo feed with jQuery. It’s not quite as in depth, but it gets the job done.
    http://www.amyhaywood.com/index.php?/blog/post/displaying-a-vimeo-feed-with-jquery

  • http://jonobr1.com/ jonobr1

    Ah, I see. Thanks for the quick reply! Have you done it with the jGFeed plugin? Seems like the only way vimeo collates searches by tag is by RSS

    e.g.

    http://vimeo.com/tag:colors

  • http://www.kisneelbypam.com/welcome.html Designer Saree Collections

    Thanks for the code and tutorial. I’ll really try it and revert you back.

  • http://www.amyhaywood.com Amy

    @Designer Saree Collections
    Thanks! I appreciate it.

  • http://spyllpaints.com Sylvia

    This is exactly what I wanted!

    Where does the plugin tell the <a> tags what to do when clicked? I want to incorporate fancybox so that the youtube video pages open up in an iframe, and I’ve added the right class for fancybox to work, but the links are still opening in a new window.

  • http://www.amyhaywood.com Amy

    @Sylvia This particular plug in doesn’t have anything attached to the <a > tag for on click. Is fancbybox working elsewhere on the page? Also, make sure that it’s initializing fancybox after the feed is loaded.

  • Henrique Moody

    I think it so good, but is much easy take a feed from:

    http://gdata.youtube.com/feeds/base/users/{username}/uploads

    Or much better: in JSON

    http://gdata.youtube.com/feeds/base/users/{username}/uploads?alt=json

    Enjoy!

  • http://www.hiccupsolutions.com Saurabh

    Nice work!!..

  • http://www.omiod.com Omiod

    Thankyou, HENRIQUE MOODY

  • Aniket

    Really nice work.. I was wondering.. how do I display youtube videos related to a particular tag??

  • http://wwww.amyhaywood.com Amy Haywood

    @Aniket Do you have an example of a particular tag? I believe it’s just a matter of being ale to find the right feed. In some cases, I’ve been able to use Yahoo Pipes (http://pipes.yahoo.com/) to create the feed I need.