Introduction:
Here I
will explain how to use jQuery
to open YouTube video in popup / lightbox window or jQuery show YouTube video in popup window. By using jQuery modal
popup / lightbox window we can display YouTube
video in popup window.
Description:
In previous posts I explained jQuery simple modal popup window example, Show subscribe modal popup for website, Ajax confirmation box with modalpopup, Open/Close Ajax ModalPopUpExtender using JavaScript, Ajax modalpopup example to edit gridview rows and many articles relating to jQuery, Asp.net. Now I will explain how to open YouTube video in popup window using jQuery.
In previous posts I explained jQuery simple modal popup window example, Show subscribe modal popup for website, Ajax confirmation box with modalpopup, Open/Close Ajax ModalPopUpExtender using JavaScript, Ajax modalpopup example to edit gridview rows and many articles relating to jQuery, Asp.net. Now I will explain how to open YouTube video in popup window using jQuery.
To
show YouTube
video in popup window
we can use jQuery modal
popup
window for that we need to write the code as shown below
<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: '350',
width: '600',
videoId: 'Sne_5PwcAss',
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;
});
$('.x').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;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class='popup'>
<div class='content'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png'
alt='quit' class='x' id='x' />
<div id='player'></div>
<p><a href='' class='close'>Close</a></p>
</div>
</div>
<div id='container'>
<a href='' class='click'><b>Click Here
to See Popup! </b></a> <br/>
</div>
</body>
</html>
|
Demo
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
Good info, thanks for sharing.
Please can you explain how to give videoid dynamically in the function onYouTubePlayerAPIReady() .. in case playing the video that the user selects from the youtube and paste it in some textbox etc..then how we can assign that user selected URL videoid in the function onYouTubePlayerAPIReady().
pls some more additional ifo about popup and load video from datbase
please give us explanation for each steps
Note: Only a member of this blog may post a comment.