Introduction

This article describes how to add a YouTube Video search and play feature in ASP.Net. Here I will describe how to communicate with the Google Search API.

Description

Since it is third party software, we require a third-party DLL to be referenced by our application that will communicate with the Google server.

For this we must download the Google Search API:

  1. GoogleSearchAPI.dll

You can download it from the source code attached to this article.

Or from this link: http://google-api-for-dotnet.googlecode.com/files/GoogleSearchAPI_0.3.1.zip

Design

Now add one TextBox,one Button and one Datalist.

In the Datalist I used two HyperLinks to show the search result title with image and duration of video.

For playing the video I used an AJAX ModalPopupExtender to show it in a popup panel with an Iframe.

Design your screen as in the following screen:

ASP1.jpg

Or you can copy the following source code:
  1. <body>
  2. <form id="form1" runat="server">
  3. <asp:ScriptManager ID="ScriptManager1" runat="server">
  4. </asp:ScriptManager>
  5. <div>
  6. <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
  7. <asp:Button ID="btnSearch" runat="server" Text="YouTube Search" OnClick="Button1_Click" /><br />
  8. <br />
  9. <asp:DataList ID="dlSearch" runat="server" Width="600px" RepeatColumns="6" CellPadding="5">
  10. <ItemTemplate>
  11. <a id="aVid1" href="javascript:ShowMyModalPopup('<%#Eval("PlayUrl") %>');">
  12. <img src='<%#Eval("Url") %>' width="200px" height="80px" /></a><br />
  13. <a id="a1" href="javascript:ShowMyModalPopup('<%#Eval("PlayUrl") %>');">
  14. <%#Eval("Title")+"(" +Eval("Duration")+")"%></a>
  15. <br />
  16. </ItemTemplate>
  17. <FooterTemplate>
  18. <asp:Label Visible='<%#bool.Parse((dlSearch.Items.Count==0).ToString())%>' runat="server" ID="lblNoRecord" Text="No Record Found!"></asp:Label>
  19. </FooterTemplate>
  20. </asp:DataList>
  21. </div>
  22. <asp:Panel ID="pnlModal" runat="server" CssClass="panel" Style="display: none">
  23. <div id="wrapper">
  24. <div id="placeholder" style="padding-top: 10px;">
  25. <iframe name="myIframe" id="myIframe" width="690px" height="500px" frameborder="0">
  26. </iframe>
  27. </div>
  28. </div>
  29. <span style="position: absolute; right: -10px; top: -10px; z-index: 1000;">
  30. <asp:LinkButton ID="lnkClose" runat="server"><img src="close.png" width="30px" height="30px" /></asp:LinkButton>
  31. </span>
  32. </asp:Panel>
  33. <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlModal"
  34. TargetControlID="pnlModal" BackgroundCssClass="modalBackground" CancelControlID="lnkClose" OnCancelScript="HideModalPopup()">
  35. </asp:ModalPopupExtender>
  36. </form>
  37. </body>
Next add the following JavaScript and CSS code in the head tag (it's used for the Popup panel design and popup hide/show):
  1. <head runat="server">
  2. <script type="text/javascript">
  3. function ShowMyModalPopup(id)
  4. var modal = $find('ModalPopupExtender1');
  5. modal.show();
  6. document.getElementById('myIframe').src = id;
  7. }
  8. function HideModalPopup() {
  9. var modal = $find('ModalPopupExtender1');
  10. modal.hide();
  11. document.getElementById('myIframe').src = "";
  12. }
  13. </script>
  14. <style type="text/css">
  15. .panel
  16. {
  17. background-color: transparent;
  18. width: 700px;
  19. height: 500px;
  20. padding: 5px;
  21. text-align: center;
  22. z-index: 5;
  23. }
  24. .modalBackground
  25. {
  26. background-color: Gray;
  27. filter: alpha(opacity=70);
  28. opacity: 0.7;
  29. }
  30. </style>
  31. <title></title>
  32. </head>

Now go to the code view.

Next add a reference of the following Google Search API DLL to your website:

  1. GoogleSearchAPI.dll
And write the following code in the .cs file:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using Google.API.Search;
  9. public partial class VideoSearch : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. if (!IsPostBack)
  14. {
  15. dlSearch.DataSource = null;
  16. dlSearch.DataBind();
  17. TextBox1.Text = "";
  18. }
  19. }
  20. protected void Button1_Click(object sender, EventArgs e)
  21. {
  22. DataSet ds = new DataSet();
  23. DataTable dt = new DataTable();
  24. dt.Columns.Add(new DataColumn("Title", typeof(string)));
  25. dt.Columns.Add(new DataColumn("PlayUrl", typeof(string)));
  26. dt.Columns.Add(new DataColumn("Url", typeof(string)));
  27. dt.Columns.Add(new DataColumn("Duration", typeof(string)));
  28. GvideoSearchClient imageClient = new GvideoSearchClient("www.c-sharpcorner.com");
  29. IList<IVideoResult> results = imageClient.Search(TextBox1.Text, 30);
  30. foreach (IVideoResult result in results)
  31. {
  32. DataRow dr = dt.NewRow();
  33. dr["Title"] = result.Title.ToString();
  34. dr["PlayUrl"] = result.PlayUrl;
  35. dr["Url"] = result.TbImage;
  36. //convert seconds to hour and minute
  37. TimeSpan t = TimeSpan.FromSeconds(result.Duration);
  38. string time = string.Format("{0:D2}h:{1:D2}m", t.Hours, t.Minutes);
  39. dr["Duration"] = time;
  40. dt.Rows.Add(dr);
  41. }
  42. dlSearch.DataSource = dt;
  43. dlSearch.DataBind();
  44. }
  45. }

In the code above I passed the TextBox value in the button click to the Google server.

After getting the result I bound it to the datatable then to the datalist control.

Just check these two lines:

  1. GvideoSearchClient client = new GvideoSearchClient ("www.c-sharpcorner.com");
  2. IList<IVideoResult> results = client.Search(TextBox1.Text, 30);

In the first line I am passing "www.c-sharpcorner.com" as the client because it requires a hosted site for security purposes.

If you don't pass that then it will show an exception.

In the second line I am passing "30" and a TextBox value. In other words I am getting 30 search results.

So you can increase or decrease this value as needed.

Now build your application. Enter a search query then press the button.

It will show the images of all the YouTube video results.

ASP2.jpg

Click on the image or link to play the video in the Popup.

ASP3.jpg

For any modifications or problems please comment.

Thank You.