Website youtube embedded video keeps playing

Question

I'm using the iframe youtube gave me to embed a video on my website.

I also am using a css popup which i learned from this page http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/

So my html code looks like this

<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<font size="4" color="#ffffff"><a style="color: #ffffff" href="javascript:void(null)" onclick="popup('popUpDiv')">Close</a><br></font>
<iframe width="560" height="315" src="http://www.youtube.com/embed/h3Pb6IyFvfg" frameborder="0" allowfullscreen></iframe>
</div>
<a href="javascript:void(null)" onclick="popup('popUpDiv')" class="more_details">more details</a>

And everything is working as i want it to however if I switch my browser to either internet explorer or chrome when i select close to close the popup the video keeps playing? I've done some googling and found others with my same issue however I only could find code that didn't work as it was supposed to.

Basically I'd like to stop the video when the popup is closed how could this be done. Thank you for any help

Answer 1

I faced the same problem before.
What I did is remove the src of the iframe when I close the popup and put it back on when I open it in jQuery. This way, i'm sure the video won't keep playing when the popup is closed.

Edit Added an Exemple:

Add an optional parameter in your function containing the video url

<a href="javascript:void(null)" onclick="popup('popUpDiv', 'http://www.youtube.com/embed/NWHfY_lvKIQ')" class="more_details">more details</a>

Set the src of your iframe in your function with the video url

function popup(pPopup, pYt){ //pYt optional
    $('iframe').attr('src', pYt);
}

Add this line in your code when you want to remove the source

$('iframe').attr('src', '');

Answer 2

You can also ditch the iframe code and use a youtube embed. Then in your javascript event you can player.pauseVideo(); where player is your embedded object.

Use the Youtube Player API: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls