January 22, 2010

Add a YouTube widget to any web site with jQuery

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
*
* 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.

 

Comments,

  • Trackbacks,
  • and Pingbacks
blog comments powered by Disqus

 

Trackbacks and Pingbacks


  1. This is my next to last blog post about the new widgets on my home page.&#160; The “Lastest Music” widget pulls data from my Last.fm account. Currently I’m displaying the 12 artists/albums that I’ve listened to the most on Last.fm over the last week.

  2. The final new widget for my home page to document is the “Latest Shared Feed Items” widget. This one displays the last 3 items that I’ve shared from Google Reader. I’m no longer displaying this widget but it was a custom designed plug-in (for the most

  3. Pingback from Updating my YouTube widget to auto load first video : Digging My Blog

  4. Pingback from Get Latest News Around The World

Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts