Asp.net jQuery Open YouTube Video in Modal POPUP
jQuery Open YouTube Video in Modal Popup Window Example:
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 , In
asp.net by jquery change div text color on mouseover , Use
jquery of change Opacity on Mouse over, jQuery
Zoom Image on Mouseover in asp.net using jQuery, jQuery
modal dialog with postbacks, Drag
and Drop Sortable Lists using jQueryUI, JQuery
UI Datepicker (Calendar) with asp.net textbox and Get
current datetime in jquery and javaScript and jquery
disable or Enable submit button after validation etc.
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">
<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
/>
</td>
</tr>
</table>
</body>
</html>
Comments
Post a Comment