Displaying Videos from YouTube Channel in ASP.NET Website

• Download demo project - 136.56 KB
• Download source - 1.67 KB

Introduction

YouTube is firmly entrenched in our lives. Now, many users cannot imagine life without the use of this site. Due to the simplicity and ease of use, YouTube has become the most popular video sharing and one of the most popular websites in the world. Like many popular Google services, YouTube has Data API. This API allows you to interact with this service. This opens up great opportunities for developers of sites and various applications. Using this API, developers can query videos, search videos, upload videos on YouTube, create and read reviews and more.

Problem

Our goal is to query all the videos from YouTube channel of the famous Russian DJ and show them on the website.

Solution of the Problem

1. To work with YouTube Data API, you need to download and install the Google Data API library. Then copy Google.GData.Client.dll, Google.GData.YouTube.dll, Google.GData.Extensions.dll files into the Bin folder of the website project and add references to them. How to do this was described in detail in my other article, Using Google Calendar in an ASP.NET website.
2. To use all possibilities that YouTube Data API offered, you need to get Developer Key.
   Developer key uniquely identifies an application that will interact with the YouTube service. You can get it here.
3. Let’s create a class to represent YouTube video on our site. The object of this class is a video that has properties: VideoId and Title.
   VideoId represents unique identifier for the video on YouTube and Title is the title of the video on YouTube:

   public class YouTubeVideoObject
      {
          public string VideoId { get; set; }
          public string Title { get; set; }
      }

4. Let’s create a class that will interact with YouTube, and return us all the videos (objects of YouTubeVideoObject class) of channel:

   public class YouTubeVideoHelper
      {
          const string YOUTUBE_CHANNEL = "BobinaMusic";
          const string YOUTUBE_DEVELOPER_KEY = "AI39si6JqO_f2b_JWSV3QUbcwg5S-1RJ4-
   	kiieosBZy9r1ORkCAv7BT5tLp579Tzmly8rvOVm3Jyueq3ZVqUNt1blS4DcoVppA";
   
          public static YouTubeVideoObject[] GetVideos()
          {
              YouTubeRequestSettings settings =
              new YouTubeRequestSettings("Bobina Channel", YOUTUBE_DEVELOPER_KEY);
              YouTubeRequest request = new YouTubeRequest(settings);
              string feedUrl = String.Format
              ("http://gdata.youtube.com/feeds/api/users/{0}/uploads?orderby=published", 
   		YOUTUBE_CHANNEL);
              Feed<Video> videoFeed = request.Get<Video>(new Uri(feedUrl));
              return (from video in videoFeed.Entries
                       select new YouTubeVideoObject()
                       {VideoId = video.VideoId, Title = video.Title}).ToArray();
          }
      }

   Description of Constants

   • YOTUBE_CHANNEL - Channel from which we will show videos
   • YOUTUBE_DEVELOPER_KEY - Developer key, obtained in step 2

   Description of GetVideos() Method

   To perform any action on YouTube Data API, it is necessary to create an object of YouTubeRequest class, passed an object of YouTubeRequestSettings class as a parameter to constructor. YouTubeRequestSettings class specifies application name (in fact, it is any string) and Developer key:

   YouTubeRequestSettings settings = 
   	new YouTubeRequestSettings("Bobina Channel", YOUTUBE_DEVELOPER_KEY);
   YouTubeRequest request = new YouTubeRequest(settings);

   Next, we need to compose URL from which we read the videos. After that, we use Get() method of YouTubeRequest class to get object of Feed class. This object contains a set of YouTubeEntry objects. Each object of YouTubeEntry class contains relevant information about the video:

   string feedUrl = String.Format
   ("http://gdata.youtube.com/feeds/api/users/{0}/uploads?orderby=published",   
   YOUTUBE_CHANNEL);
   Feed<Video> videoFeed = request.Get<Video>(new Uri(feedUrl));

   Then, we get an array of YouTubeVideoObject objects (this class has been created by us in step 3.) and return it from the method:

   return (from video in videoFeed.Entries select new YouTubeVideoObject()
   {VideoId = video.VideoId, Title = video.Title}).ToArray();      

5. Now we have an array of videos (an array of YouTubeVideoObject objects). All we need to do is to show these videos on our web site. To do this, create the following code in aspx page of the website:

   <asp:Repeater ID="VideosRepeater" runat="server">
      <ItemTemplate>
         <%# Eval("Title") %> <br />
         <object width="427" height="258">
              <param name="movie" value="http://www.youtube.com/v/
   		<%# Eval("VideoId") %>"></param>
              <param name="allowFullScreen" value="true"></param>
              <param name="allowscriptaccess" value="always"></param>
              <param name="wmode" value="opaque"></param>
              <embed src="http://www.youtube.com/v/<%# Eval("VideoId") %>?" 
   		type="application/x-shockwave-flash" width="427" 
   		height="258" allowscriptaccess="always" allowfullscreen="true" 
   		wmode="opaque"></embed>
            </object>
      </ItemTemplate>
      <SeparatorTemplate>
        <br />
      </SeparatorTemplate>
      </asp:Repeater>

   The code consists of object tag that allows to embed YouTube video in website. This code is wrapped into Repeater to list all obtained YouTube videos. Note that we use <%# Eval() %> data-binding expression, to get Title and VideoId of underlying YouTubeVideoObject object.

   After that, we just need to bind array of videos to Repeater control:

   protected override void OnLoad(EventArgs e)
       {
              base.OnLoad(e);
              VideosRepeater.DataSource = YouTubeVideoHelper.GetVideos();
              VideosRepeater.DataBind();
       }

The result will look like this:

Conclusion

In this article, we examined the interaction with YouTube service to display videos from YouTube channel on our website. Data API provides a rich set of features to interact with YouTube. This opens up wide horizons for developers to be creative.

History

• 6^th June, 2011: Initial version