aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Open YouTube Video in Modal POPUP Window Example

Mar 30, 2013

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.

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="">
<title>jQuery Show YoutTube Videos in popup window when click on link</title>
<script type="text/javascript" src=""></script>
var tag = document.createElement('script');
tag.src = "";
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) {;
var overlay = jQuery('<div id="overlay"></div>');
return false;

return false;

return false;
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
.content a{
text-decoration: none;
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
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;
<div class='popup'>
<div class='content'>
<img src='' alt='quit' class='x' id='x' />
<div id='player'></div>
<p><a href='' class='close'>Close</a></p>
<div id='container'>
<a href='' class='click'><b>Click Here to See Popup! </b></a> <br/>

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...
This comment has been removed by a blog administrator.
yas said...

Good info, thanks for sharing.

Unknown said...

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().

Anonymous said...

pls some more additional ifo about popup and load video from datbase

Anonymous said...

please give us explanation for each steps

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.