Play YouTube video in ASP.Net Application

Using the modal pop up control it is easy to play YouTube video in Asp.Net application.

First register the AJAX Control Toolkit on the page

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

 Aspx Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to play YouTube video in ASP.Net Application</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;
            }
    </style>

</head>
<body>

    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <h3>How to play YouTube video in ASP.Net Application</h3>
            <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>
            <ajax:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
                PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground" CancelControlID="btnClose">
            </ajax: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 = document.getElementById("<%=txtUrl.ClientID %>").value;
                     url = url.split('v=')[1];
                     $get("video").src = "//www.youtube.com/embed/" + url
                     $find("mpe").show();
                     return false;
                 }
            </script>
        </div>
    </form>
</body>
</html>

Enter the you tube url in the text box displayed in the output window and click the button. The youtube video will be opened in a pop up windown as shown in the output.

Output

 

Demo Code

Download Demo