How To Play YouTube Video In ASP.NET Web Application Using AJAX

Nikunj Satasiya
7y
1.7k
0
3

Blog

SourceCode.zip

Introduction

In this article, I am going to explain how to play a YouTube video in ASP.NET web application using AJAX Modal Popup. While working with any web application in any technology, be it ASP.NET, or PHP, or Java, or any other language, sometimes it’s necessary to play a media file or any media online on your web page based on the client’s requirement. Recently, a few days ago, I got a new requirement from my client to play a YouTube video on the webpage.

Actually, they wanted one textbox and one button with the name Play Video on the webpage. When a user enters the URL of the YouTube video in the given textbox and clicks on the button, one Modal Popup window will open and load the video from YouTube to play that video in a popup window.

Implementation

First, we need to register the AJAX Window Toolkit with our web application.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Now, we will write the HTML code with one textbox and one button, as following.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CS" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 500px;
border: 3px solid #0DA9D0;
padding: 0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
padding:5px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.Input {
background-color: #2f8cf1; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button {
background-color: #ff6a00; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:TextBox ID="txtUrl" runat="server" CssClass="button1 Input" Width="370" Text = "https://www.youtube.com/watch?v=d4TKdE8bmSI" />
<asp:Button ID="btnShow" runat="server" CssClass="button1 button" Text="Play Video" OnClientClick="return ShowModalPopup()" />
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground" CancelControlID = "btnClose">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Youtube Video
</div>
<div class="body">
<iframe id = "video" width="420" height="315" frameborder="0" allowfullscreen></iframe>
<br />
<br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</div>
</asp:Panel>
<script type="text/javascript">
function ShowModalPopup() {
var url = $get("<%=txtUrl.ClientID %>").value;
url = url.split('v=')[1];
$get("video").src = "//www.youtube.com/embed/" + url
$find("mpe").show();
return false;
}
function HideModalPopup() {
$get("video").src = "";
$find("mpe").hide();
return false;
}
</script>
</form>
</body>
</html>

For, opening the popup window and playing the video, you need to write the following JavaScript code.

<script type="text/javascript">
function ShowModalPopup() {
var url = $get("<%=txtUrl.ClientID %>").value;
url = url.split('v=')[1];
$get("video").src = "//www.youtube.com/embed/" + url
$find("mpe").show();
return false;
}
function HideModalPopup() {
$get("video").src = "";
$find("mpe").hide();
return false;
}
</script>

Actually, when a user clicks on Play Video button, this JavaScript function will be called and will open a popup window that fetches the video from YouTube based on the entered video URL. Now, when the user clicks on the close button in popup function of JavaScript, the “HideModelPopup” function will be called and the Modal Popup will close.

Output Screen

After you click the Play Video button, the Modal Popup will open and show/play the YouTube video.

Conclusion

In this write-up, I explained how to play YouTube videos on the web page using AJAX Control Toolkit. I hope this article helps the beginner developers to build a better application.