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:

Comments

Popular posts from this blog