need help with pop-up window javascript

Hi, need help with this one. I'm not really well versed with java scripts and all.
I have been working on to create a pop-up window for youtube video using javascript.

I have this code which I have been trying to work on, but here’s the problem:

When viewing the page, even when I haven’t clicked the link for the video yet, the video automatically plays.
When I clicked the link for the video, obviously, the video is already playing.
Even if I have closed the pop-up window, the video is still playing.


What I really wanted to happen is:

When I’d click the link for the video, that’s when the video should automatically start playing.
When closing the pop-up window, the video would stop playing.


Could anyone help me with this one? Here’s what I have been working on...

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

var height = $(document).height();
var width = $(document).width();
var spanHeight = $('.popup').height();
var spanWidth = 500;

$('.pop-up-link').click(function() {
$(this).next()
.css({ "top" : height/2 - spanHeight/2 })
.css({ "left" : width/2 - spanWidth/2 })
.fadeIn(500);
});

$(".close").click(function () {
$('.pop-up-link').next().fadeOut(500);
});
});
</script>

<style>
h3 { margin:0; }
.popup { position: absolute; padding: 5px; background: #CCC; border: #666 1px solid; display:none; width:500px; margin: 0 auto; min-height: 200px; }
.close { float: right; position: relative; z-index: 99999; margin: 3px 6px 0; }
.pop-heading { background: #7F7777; color: #FFF; overflow: hidden; padding: 0.5em; position: absolute; width: 487px; }
.pop-info { padding: 15px 2px 15px 2px; clear:both; }
</style>

<h1>Funny</h1>

<a class="pop-up-link" href="#" title="Funny Babies">Watch Video</a>
<div class='popup'>
<a href='#' title="Close" class='close' name="Funny Babies">
<img src="http://picpaste.com/extpics/close-XdZcGwGA.png" alt='close' height="20" width="20" /></a>
<div class="pop-heading">
<h3>Test Video</h3>
</div>
<div class="pop-info">
<p><iframe width="500" height="315" src="http://www.youtube-nocookie.com/embed/nEmqlGwJ3L8?autoplay=1" frameborder="0" allowfullscreen></iframe></p>
</div>
</div>

im pretty sure the you can tun off autoplay by changing the ?autoplay=1 to a 0 in the iframe url.

this is all happening because you are including the video on the page in a hidden iframe, with autoplay turned on.

You are fading out the div but it is still present on the page. You could remove it entirely. Either

$(".close").click(function () {
$('.pop-up-link').next().fadeOut(500).remove();
});

// or probably

$(".close").click(function () {
$('.pop-up-link').next().fadeOut(500, function () {
$(this).remove();
});
});
If you might want to re-activate it later you might consider css('display', 'none') .. but I can't remember/haven't checked if this will stop the video(?).

Alternatively consider dynamically changing the src of the iframe to a static image, perhaps after it has faded-out (as in my above code).

There is, alternatively, a YouTube API (http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html) to control a video in an iframe.

You are fading out the div but it is still present on the page. You could remove it entirely. Either

$(".close").click(function () {
$('.pop-up-link').next().fadeOut(500).remove();
});

// or probably

$(".close").click(function () {
$('.pop-up-link').next().fadeOut(500, function () {
$(this).remove();
});
});
If you might want to re-activate it later you might consider css('display', 'none') .. but I can't remember/haven't checked if this will stop the video(?).

Alternatively consider dynamically changing the src of the iframe to a static image, perhaps after it has faded-out (as in my above code).

Hi AndrewGSW, thanks for the code above. It did actually stop the video when closing the pop-up window. The only problem I had now is that, when I launch the page to a browser the video plays automatically even when I haven't clicked the link yet. Is there a way I could do to make it play automatically only when the link has been clicked? I really would appreciate your help. Thanks!

Is there a way I could do to make it play automatically only when the link has been clicked?
Other than using the API I mentioned, you could set the initial src to a static image (of the correct size) and swap this src when they click the link.

Maybe..

$('.pop-up-link').click(function() {
$(this).next()
.css({ "top" : height/2 - spanHeight/2 })
.css({ "left" : width/2 - spanWidth/2 })
.fadeIn(500, function () {
$('iframe').attr('src', 'http://www.youtube-nocookie.com/embed/nEmqlGwJ3L8?autoplay=1');
// you should give the iframe an id..
// then use $('#yourframeid')
});
});

HINT Give specific elements id's rather than using $(this).next() etc..