I have this Jquery popup where I store an iframe with a youtube video. When I click the link, the popup opens and the User can click on the video and play it. Even though, when I click outside the popup, the popup closes, but the video/sound keeps playing! How can I avoid this?

Here's my HTML

<a href="#" id="showPopup">CLICK</a>

<div class="bg" style="display:none"></div>

<div class="popup" style="display:none">
  <iframe width="480" height="360" src="//www.youtube/embed/Q_WHGV5bejk" frameborder="0" allowfullscreen></iframe>
</div>

my JS:

$(function(){
$("#showPopup").click(function(e){
    e.stopPropagation();
    $(".bg").toggle();
    $(".popup").toggle();
});
$("body").click(function(){
    $(".bg").toggle();
    $(".popup").hide();
});
});

And the CSS:

.popup{
background-color:#E6E9F2;
position:absolute;
min-height:auto;
width:auto;
border: solid 2px #B9EAF0;
z-index: 1002;
}

.bg {
 background-color:#111;
 opacity: 0.65;
 position:absolute;
 z-index: 1000;
 top:0px;
 left:0px;
 width:100%;
 min-height:100%;
 overflow:auto;
}

I alos created a Fiddle /

so, does anyone have a suggestion?

thanks in advance...

I have this Jquery popup where I store an iframe with a youtube video. When I click the link, the popup opens and the User can click on the video and play it. Even though, when I click outside the popup, the popup closes, but the video/sound keeps playing! How can I avoid this?

Here's my HTML

<a href="#" id="showPopup">CLICK</a>

<div class="bg" style="display:none"></div>

<div class="popup" style="display:none">
  <iframe width="480" height="360" src="//www.youtube./embed/Q_WHGV5bejk" frameborder="0" allowfullscreen></iframe>
</div>

my JS:

$(function(){
$("#showPopup").click(function(e){
    e.stopPropagation();
    $(".bg").toggle();
    $(".popup").toggle();
});
$("body").click(function(){
    $(".bg").toggle();
    $(".popup").hide();
});
});

And the CSS:

.popup{
background-color:#E6E9F2;
position:absolute;
min-height:auto;
width:auto;
border: solid 2px #B9EAF0;
z-index: 1002;
}

.bg {
 background-color:#111;
 opacity: 0.65;
 position:absolute;
 z-index: 1000;
 top:0px;
 left:0px;
 width:100%;
 min-height:100%;
 overflow:auto;
}

I alos created a Fiddle http://jsfiddle/nLBZa/6/

so, does anyone have a suggestion?

thanks in advance...

• javascript
• jquery
• html
• css
• youtube

2 Answers 2

Try adding the following into your Jquery

$('#playerID').get(0).stopVideo();

EDIT: OK, so I thought that would work according to the API, anyways... Here is another solution:

var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);

and your fiddle updated.

Assume, I have several different YT videos embedded in CSS only modals, like this:

<div id="video1" class="modalDialog">
<div>
    <a href="#close" title="Close" class="videoclose">X</a>
    <div id="video1_content"><iframe width="420" class="yvideo" id="video1_iframe" height="315" src="https://www.youtube./embed/_Qc4V_vEXdY?rel=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
</div>

I can dynamically unload (and therefor stop playing) a single video like so:

$('.videoclose').click(function( e ){
      var contentdiv = $(this).next('div');
      var iframe = $(contentdiv).find('iframe:first');
      var video = $(iframe).attr("src");
      $(iframe).attr("src","");
      $(iframe).attr("src",video);
});

Thanks to Mike for the ignition ;-)