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.

Thursday, November 20, 2014

Asp.net jQuery Open YouTube Video in Modal POPUP

jQuery Open YouTube Video in Modal Popup Window Example:




YouTube Video in Modal POPUP in asp.net web page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Playyoutubvideos.aspx.cs"
    Inherits="Playyoutubvideos" %>

<!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>
    <title>jQuery Show YoutTube Videos in popup window when click on link</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        /* video settings come here */
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '300',
                width: '400',
                videoId: 'hoBm6IsjXX0',
                events: {
                    'onReady': onPlayerReady
                }
            });
        }
        /* Autoplay when the dialog opens */
        function onPlayerReady(event) {
            event.target.playVideo();
        }
        $(document).ready(function () {
            var overlay = jQuery('<div id="overlay"></div>');
            $('.close').click(function () {
                $('.popup').hide();
                overlay.appendTo(document.body).remove();
                return false;
            }); 

            $('.click').click(function () {
                overlay.show();
                overlay.appendTo(document.body);
                $('.popup').show();
                return false;
            });
        });
    </script>
    <style type="text/css">
        #overlay
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            filter: alpha(opacity=70);
            -moz-opacity: 0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            z-index: 100;
            display: none;
        }
        .content a
        {
            text-decoration: none;
        }
        .popup
        {
            width: 100%;
            margin: 0 auto;
            display: none;
            position: fixed;
            z-index: 101;
        }
        .content
        {
            min-width: 600px;
            width: 600px;
            min-height: 150px;
            margin: 100px auto;
            background: #f3f3f3;
            position: relative;
            z-index: 103;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px #000;
        }
        .content p
        {
            clear: both;
            color: #555555;
            font-size: 13px;
            text-align: justify;
        }
        .content p a
        {
            color: #d91900;
            font-weight: bold;
        }
    </style>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            color: #990000;
            font-size: x-large;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" class="style1">
        <tr>
            <td align="center">
                &nbsp; <span class="style2"><strong>How to Play youtub video in asp.net web page by
                    video id<br />
                </strong></span>
            </td>
        </tr>
        <tr>
            <td align="center">
                <b></b>
                <br />
            </td>
        </tr>
        <tr>
            <td align="center">
                <p>
                    <a href='' class='click'>Click Here to See video </a>
            </td>
        </tr>
        <tr>
            <td align="center">
                <div class='popup'>
                    <div>
                        <div id='player'>
                        </div>
                    </div>
                    <a href='' class='close'>Close</a></p>
                </div>
                <br />
                &nbsp;
            </td>
        </tr>
    </table>
</body>
</html>


Asp.net related other post:

No comments:

Post a Comment