need help with pop-up window javascript

[boknoval]

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>

[DanInMa]

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.

[AndrewGSW]

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

[AndrewGSW]

There is, alternatively, a YouTube API to control a video in an iframe.

[boknoval]

Originally Posted by AndrewGSW

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!

[AndrewGSW]

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