all posts

Add a YouTube widget to any web site with jQuery

Published to Blog on 22 Jan 2010

Another new addition to the home page of my blog is the “Latest Videos” widget. It pulls in the 6 most recent videos that I have tagged as favorites on YouTube. It also has the option to pull in only videos that I have uploaded, but since I rarely upload videos I decided to spotlight any videos that I favorite for the time being.

YouTube widget

Like the Twitter widget and the Flickr widget that I wrote about recently, the YouTube widget is also a JavaScript only widget. It uses jQuery to make an AJAX request to get a YouTube feed formatted as json and and a little bit more JavaScript to output the images, titles and author info to the page. The code that I used is based on the YouTube Channel Playlist plugin (demo) but I modified it quite a bit.

/**
 \*  Plugin which renders the YouTube channel videos list to the page
 \*  @author:  H. Yankov (hristo.yankov at gmail dot com)
 \*  @version: 1.0.0 (Nov/27/2009)
 \*    [http://yankov.us](http://yankov.us)
 \*
 \*  Modified my Dan Hounshell (Jan/2010) to work for favorites or
 \*  uploads feeds and simplified output
 */

 var __mainDiv;
 var __preLoaderHTML;
 var __opts;

 function __jQueryYouTubeChannelReceiveData(data) {

     var cnt = 0;

     $.each(data.feed.entry, function(i, e) {
         if (cnt < __opts.numberToDisplay) {
             var parts = e.id.$t.split('/');
             var videoId = parts\[parts.length-1\];
             var out = '<div class="video"><a href="' \+
                  e.link\[0\].href + '"><img src="http://i.ytimg.com/vi/' \+
                  videoId + '/2.jpg"/></a><br /><a href="' \+
                  e.link\[0\].href + '">' \+ e.title.$t + '</a><p>';
             if (!__opts.hideAuthor) {
                 out = out \+ 'Author: ' \+ e.author\[0\].name.$t + '';
             }
             out = out \+ '</p></div>';
             __mainDiv.append(out);
             cnt = cnt + 1;
         }
     });

    // Open in new tab?
    if (__opts.linksInNewWindow) {
        $(__mainDiv).find("li > a").attr("target", "_blank");
    }

    // Remove the preloader and show the content
    $(__preLoaderHTML).remove();
    __mainDiv.show();
}

(function($) {
    $.fn.youTubeChannel = function(options) {
        var videoDiv = $(this);

        $.fn.youTubeChannel.defaults = {
            userName: null,
            channel: "favorites", //options are favorites or uploads
            loadingText: "Loading...",
            numberToDisplay: 3,
            linksInNewWindow: true,
            hideAuthor: false
        }

        __opts = $.extend({}, $.fn.youTubeChannel.defaults, options);

        return this.each(function() {
            if (__opts.userName != null) {
                videoDiv.append("<div id=\\"channel_div\\"></div>");
                __mainDiv = $("#channel_div");
                __mainDiv.hide();

                __preLoaderHTML = $("<p class=\\"loader\\">" \+
                    __opts.loadingText + "</p>");
                videoDiv.append(__preLoaderHTML);

                // TODO: Error handling!
                $.ajax({
                    url: "http://gdata.youtube.com/feeds/base/users/" \+
                        __opts.userName + "/" \+ __opts.channel + "?alt=json",
                    cache: true,
                    dataType: 'jsonp',
                    success: __jQueryYouTubeChannelReceiveData
                });
            }
        });
    };
})(jQuery);

To use the YouTube plugin you just need to add a script reference to the jQuery library and the jquery.youtube.channel.js file. Then add a container to hold the rendered HTML, a line of JavaScript to wire everything up, and some CSS to format the output.

<script type=”text/javascript” src=”jquery.youtube.channel.js”></script>

<div id="youtubevideos"></div>

<script type="text/javascript"\>
    $(document).ready(function() {
        $('#youtubevideos').youTubeChannel({
            userName: 'diggerdanh',
            channel: "favorites",
            hideAuthor: false,
            numberToDisplay: 6,
            linksInNewWindow: true
            //other options
            //loadingText: "Loading...",
        });
    });
</script>

A simple YouTube widget for everyone. Enjoy.

UPDATE: Widget updated to display first video and change to video when clicking on thumbnail.


Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, motorcycles, sports, chickens, watches, food, Nashville, Savannah, Cincinnati and family.
Dan Hounshell on Twitter