How to use YouTube API to search videos

Using YouTube API to search videos

In the past, you needed to register and obtain developer key to use YouTube API. Now you can search videos as anonymous, all data reading is not restricted. Developer key is needed only for things like upload your videos to YouTube programmatically. For example, let say I want to search for Age of Empires videos (AoE is popular strategic game). Simple syntax would be:
http://gdata.youtube.com/feeds/api/videos?q=age+of+empires&prettyprint=true&alt=rss
YouTube service will return XML with search results. To analyze this XML easier, I added prettyprint= true in request. This option format XML output nicely with line breaks and tabs. Complete list of available parameters you can find on http://code.google.com/apis/youtube/2.0/reference.html#Searching_for_videos page. Default XML format is atom, but in this example we'll use alt=rss to get output formatted as RSS feed.
My YouTube Search form will contain one TextBox control named tbSearch, one Button control named btnSearch and GridView to show search results. RSS returned from YouTube API has not structure acceptable for GridView. Because of that, I will use XmlDataSource control to load RSS and additional XSLT file to convert XML to format acceptable for GridView.

Code of XSLT file (named YouTube-Transform.xslt) that converts YouTube XML to XML for GridView control would be:

xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:msxsl="urn:schemas-microsoft-com:xslt"
 xmlns:media='http://search.yahoo.com/mrss/'
 xmlns:yt='http://gdata.youtube.com/schemas/2007'
 exclude-result-prefixes="msxsl">
 <xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>
 <xsl:template match="/">
  <xsl:element name="items">
   <xsl:for-each select="/rss/channel/item">
    <xsl:element name="item">
     <xsl:attribute name="title">
      <xsl:value-of select="title"/>
     </xsl:attribute>
     <xsl:attribute name="description">
      <xsl:value-of select="media:group/media:description" />
     </xsl:attribute>
     <xsl:attribute name="author">
      <xsl:value-of select="author" />
     </xsl:attribute>
     <xsl:attribute name="keywords" >
      <xsl:value-of select="media:group/media:keywords" />
     </xsl:attribute>
     <xsl:attribute name="videoId" >
      <xsl:value-of select="media:group/yt:videoid"/>
     </xsl:attribute>
     <xsl:attribute name="duration" >
      <xsl:value-of select="media:group/yt:duration/@seconds"/>
     </xsl:attribute>
    </xsl:element>
   </xsl:for-each>
  </xsl:element>
 </xsl:template>
</xsl:stylesheet>

User will type search terms in TextBox and click Search button. I will use XmlDataSource control to bind returned data to GridView. GridView will show search results in one template column. ASP.NET markup code would be like this:

<asp:TextBox runat="server" ID="tbSearch" />
<asp:Button Text="Search" runat="server" ID="btnSearch" onclick="btnSearch_Click" /><br /><br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EnableViewState="false">
<Columns>
 <asp:TemplateField>
 <ItemTemplate>
 <table width="550"><tr>
 <td valign="top">
 <a href='http://www.beansoftware.com/ASP.NET-YouTube-Player.aspx?id=<%# Eval("videoId") %>'>
 <img border='0' src='http://img.youtube.com/vi/<%# Eval("videoId") %>/1.jpg' /><br /><br />
 <img border='0' src='http://img.youtube.com/vi/<%# Eval("videoId") %>/2.jpg' /><br /><br />
 <img border='0' src='http://img.youtube.com/vi/<%# Eval("videoId") %>/3.jpg' />
 </a>
 </td>
 <td valign="top">
 <h1><a href='http://www.beansoftware.com/ASP.NET-YouTube-Player.aspx?id=<%# Eval("videoId") %>'><%# Eval("title") %></a></h1><br />
 <p><b>Description:</b><%# Eval("description") %></p>
 <p><b>Author:</b> <%# Eval("author") %><br />
 <b>Keywords:</b> <%# Eval("keywords") %><br />
 <b>Duration:</b> <%# Eval("duration") %> seconds</p>
 </td>
 </tr></table>  
 </ItemTemplate>
 </asp:TemplateField>
</Columns>
</asp:GridView>
 
<asp:XmlDataSource ID="XmlDataSource1" runat="server" TransformFile="YouTube-Transform.xslt">
</asp:XmlDataSource>

On search button click, RSS will be loaded from YouTube, converted by XSLT and finally shown in GridView:

[ C# ]
protected void btnSearch_Click(object sender, EventArgs e)
{
 XmlDataSource1.DataFile = "http://gdata.youtube.com/feeds/api/videos?v=2&q=" +
   Server.UrlEncode(tbSearch.Text) + "&alt=rss";
 GridView1.DataSourceID = XmlDataSource1.ID;
}

[ VB.NET ]
Protected Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click
 XmlDataSource1.DataFile = "http://gdata.youtube.com/feeds/api/videos?v=2&q=" & _
   Server.UrlEncode(tbSearch.Text) & "&alt=rss"
 GridView1.DataSourceID = XmlDataSource1.ID
End Sub
By default, YouTube API returns first 25 records. You can change that using max-results parameter (max value is 50). To see other videos increase start-index parameter which is 0 by default. For example, if your page size is 20 records and you want to show third page, set start-index = 41 and max-results = 20.