In this article I will explain, how to play YouTube videos inside ASP.Net AJAX Control Toolkit ModalPopupExtender Modal Popup in ASP.Net Web Application.
There is a TextBox to allow user enter YouTube Video URL, after entering the YouTube Video URL user has to click the button which then opens up an AJAX Modal Popup with the YouTube Video being displayed within it.
HTML Markup
First we need to register the AJAX Control Toolkit on the page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Below is the HTML Markup which consists of a TextBox, a Button and an ASP.Net AJAX ModalPopupExtender Modal Popup.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:TextBox ID="txtUrl" runat="server" Width="300" Text = "" />
<asp:Button ID="btnShow" runat="server" 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>
You will notice that I have made use of a Hidden LinkButton lnkDummy the reason is that, ASP.Net AJAX ModalPopupExtender requires TargetControlID to be set and since we want to open the ASP.Net AJAX ModalPopupExtender Modal Popup from Client Side JavaScript we need to set a hidden control as TargetControlID.
Play YouTube Video inside AJAX Modal Popup in ASP.Net
Now when the "Play Video" Button is clicked, a JavaScript function named ShowModalPopup is raised, which fetches the YouTube Video URL from the TextBox, extracts the YouTube Video ID from it, appends it to the YouTube embed video URL and sets it to the HTML IFRAME SRC property. Once all this is done, the Modal Popup is shown.
When the Close Button is clicked, a JavaScript function named HideModalPopup is raised, which resets the HTML IFRAME SRC property and closes the Modal Popup.
<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>
![Play YouTube Video inside AJAX Modal Popup in ASP.Net]()
![Play YouTube Video inside AJAX Modal Popup in ASP.Net]()
Demo
Downloads
