How to play youtube video using modelpopup xxtender in Asp.net

Description:-

In this article we will Play YouTube video using ModelPopupExtender in dot net. Here we will Create Textbox, Button Control for Open YouTube Video in Model Popup Extender by Given Textbox Url for YouTube Video. follow this step to create it.

Design your Webpage like below.

<div>
   <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   </cc1:ToolkitScriptManager>
   <asp:TextBox ID="txtUrl" runat="server" Width="300" Text="https://www.youtube.com/watch?v=cWuvnc6u93A" />
   <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>
   <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;
      
      }
      
   </script>
</div>

Here you can see I have used Script for getting YouTube URL and show link in ModelPopup Extender.

<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;   
    }   
</script>

Now assign some Style for ModelPopupExtender for Layout in Webpage.

<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>

Now run your Application and Paste YouTube Video URL in Textbox and Click on button to open ModelPopupExtender with YouTube Video.

Author : Umesh Patel

Related Posts