How to Play YouTube Videos in Asp.net by using Jquery

jQuery Play (Embed) YouTube Videos in Asp.net from URL And YouTube Api:



In this post we will explain how to play YouTube videos in asp.net we application or asp.net web page or website using c# or how to embed youtube video in .aspx page or Display YouTube videos in asp.net website from you tub video URL and video id by the help of jquery.

jQuery Embed  or display YouTube Videos in Asp.net:

For the Embedding you tube video with asp.net page we can use “http://code.jquery.com/jquery-1.8.2.js” jquery.

How to get the Youtube Api code:

For the display youtube videos in asp.net web page here we ues youtub API (Application Programming interface) for this we get it by the fallowing URl and save it in a variable by the Java Script code.

var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Display vide in asp.net web page:

Now we define player setting in asp web page.
function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '400',
                width: '800',
                videoId: 'hoBm6IsjXX0',
                events: {
                    'onReady': onPlayerReady
                }
            });
        }
        /* Autoplay when the dialog opens */
        function onPlayerReady(event) {
            event.target.playVideo();
        }


How to Play youtube video in Asp.net application:

<%@ 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: '400',
                width: '800',
                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">
        .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>
            <a href='' class='click'>Click Here to See video </a>
               
                </b>
                <br />
               
            </td>
        </tr>
        <tr>
            <td align="center">
             <p>
                    <a href='' class='close'>Close</a></p>
            </td>
        </tr>
        <tr>
            <td align="center">
               
                <div class='popup'>
                    <div class='content'>
                        <div id='player'>
                        </div>
                    </div>
                </div>
                <br />
                &nbsp;
            </td>
        </tr>
    </table>   
</body>
</html>

How to Play YouTube Videos in Asp.net by using Jquery by parijat


If you like this Post then Share this on Facebook, Google+ and other site by this the people rich this easily.

Asp.net Related Other Post:



Comments

Popular posts from this blog