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:
- 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:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="YouTube Search" OnClick="Button1_Click" /><br />
<br />
<asp:DataList ID="dlSearch" runat="server" Width="600px" RepeatColumns="6" CellPadding="5">
<ItemTemplate>
<a id="aVid1" href="javascript:ShowMyModalPopup('<%#Eval("PlayUrl") %>');">
<img src='<%#Eval("Url") %>' width="200px" height="80px" /></a><br />
<a id="a1" href="javascript:ShowMyModalPopup('<%#Eval("PlayUrl") %>');">
<%#Eval("Title")+"(" +Eval("Duration")+")"%></a>
<br />
</ItemTemplate>
<FooterTemplate>
<asp:Label Visible='<%#bool.Parse((dlSearch.Items.Count==0).ToString())%>' runat="server" ID="lblNoRecord" Text="No Record Found!"></asp:Label>
</FooterTemplate>
</asp:DataList>
</div>
<asp:Panel ID="pnlModal" runat="server" CssClass="panel" Style="display: none">
<div id="wrapper">
<div id="placeholder" style="padding-top: 10px;">
<iframe name="myIframe" id="myIframe" width="690px" height="500px" frameborder="0">
</iframe>
</div>
</div>
<span style="position: absolute; right: -10px; top: -10px; z-index: 1000;">
<asp:LinkButton ID="lnkClose" runat="server"><img src="close.png" width="30px" height="30px" /></asp:LinkButton>
</span>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlModal"
TargetControlID="pnlModal" BackgroundCssClass="modalBackground" CancelControlID="lnkClose" OnCancelScript="HideModalPopup()">
</asp:ModalPopupExtender>
</form>
</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):
<head runat="server">
<script type="text/javascript">
function ShowMyModalPopup(id)
var modal = $find('ModalPopupExtender1');
modal.show();
document.getElementById('myIframe').src = id;
}
function HideModalPopup() {
var modal = $find('ModalPopupExtender1');
modal.hide();
document.getElementById('myIframe').src = "";
}
</script>
<style type="text/css">
.panel
{
background-color: transparent;
width: 700px;
height: 500px;
padding: 5px;
text-align: center;
z-index: 5;
}
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
<title></title>
</head>
Now go to the code view.
Next add a reference of the following Google Search API DLL to your website:
- GoogleSearchAPI.dll
And write the following code in the .cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Google.API.Search;
public partial class VideoSearch : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
dlSearch.DataSource = null;
dlSearch.DataBind();
TextBox1.Text = "";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
DataSet ds = new DataSet();
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Title", typeof(string)));
dt.Columns.Add(new DataColumn("PlayUrl", typeof(string)));
dt.Columns.Add(new DataColumn("Url", typeof(string)));
dt.Columns.Add(new DataColumn("Duration", typeof(string)));
GvideoSearchClient imageClient = new GvideoSearchClient("www.c-sharpcorner.com");
IList<IVideoResult> results = imageClient.Search(TextBox1.Text, 30);
foreach (IVideoResult result in results)
{
DataRow dr = dt.NewRow();
dr["Title"] = result.Title.ToString();
dr["PlayUrl"] = result.PlayUrl;
dr["Url"] = result.TbImage;
//convert seconds to hour and minute
TimeSpan t = TimeSpan.FromSeconds(result.Duration);
string time = string.Format("{0:D2}h:{1:D2}m", t.Hours, t.Minutes);
dr["Duration"] = time;
dt.Rows.Add(dr);
}
dlSearch.DataSource = dt;
dlSearch.DataBind();
}
}
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:
GvideoSearchClient client = new GvideoSearchClient ("www.c-sharpcorner.com");
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.