Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, November 21, 2014

How Play YouTube Video in Your Asp.net Website by URL

How Play YouTube Video in Your Asp.net Website by URL:




Now we consider a Example of how to display YouTube videos in asp.net web page by using Ajax. As we maintain it is also possible to show the YouTube videos by using Jquery and model Popup. In this Example we use Ajax model popup to display the video in .aspx page or asp.net web page.

Ajax model popup function for show the YouTube video:

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

Model popup style for display YouTube video:
<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 ;
            padding: 0;
        }
        .modalPopup .header
        {
            background-color:Maroon;
            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>

Register Ajax on asp.net page:

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

In this code there is a TextBox to allow you to enter YouTube Video URL, and after entered the YouTube Video URL  and click the button to play the YouTube video on page.


Code for Play YouTube Video in Your Asp.net Website by URL

<%@ 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 ;
            padding: 0;
        }
        .modalPopup .header
        {
            background-color:Maroon;
            height: 60px;
            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">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:TextBox ID="txtUrl" runat="server" Width="300" Text = "https://www.youtube.com/watch?v=4jAotkRY14Q" />
<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 on Asp.net web page <br />
        This Example From <a href="http://asp-net-by-parijat.blogspot.in/" target=_blank>"http://asp-net-by-parijat.blogspot.in/"</a>
    </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>
    </form>
</body>
</html>

The given Image Describe how it work.

How Play YouTube Video in Your Asp.net Website by URL

Asp.net Related Other Post:

Here we give the list of Examples related to gridview:

No comments:

Post a Comment