Changing iframe src stops parent from hiding

Question

I have the following html.

<div id="video-popup-overlay"></div>

<div id="video-popup-container">
    <div id="video-popup-close" class="fade"><i class="fa fa-times"></i></div>
    <div id="video-popup-iframe-container">
        <iframe id="video-popup-iframe" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

Basically I have a video playing when the #video-popup-container is showing. I want to be able to hide this video. But normally when the element is hidden, the video still plays in the background.

That is why I want to change the src. But when I change the src, the elements don't hide. But the hide commands work if I don't change the src.

Is there a reason this would be happening?

$("#video-popup-close, #video-popup-overlay").on('click', function(e){
    $("#video-popup-iframe").attr('src', "");
    $("#video-popup-overlay").hide();
    $("#video-popup-container").hide();
});

Here is an example

@CBroe Nope, if I comment out the 'src' change it works if I have it, it doesn't. — bryan, Apr 07 '16 at 17:30

twill · Accepted Answer · 2016-04-07T18:40:25.867

Is it a requirement to be able to potentially show again after it is hidden? Since you're setting the src param in the iframe to blank I'll assume probably not?

If that is the case, I would recommend to try using the .remove() function instead of hiding. ie:

$("#video-popup-close, #video-popup-overlay").on('click', function(e){
     $("#video-popup-overlay, #video-popup-container").remove(); 
});

UPDATE:

Based on the fiddle provided it looks like you are calling the wrong ID's to close. View fiddle here: https://jsfiddle.net/g139c9b0/2/

$("#video-popup-close, #video-popup-overlay").on('click', function(e){
    $("#video-popup-overlay, #video-popup-iframe-container, #video-popup-close").hide();
    $("#video-popup-iframe").attr('src', '');
});

MORE UPDATE: Sorry, I thought that would be enough to extrapolate. Yes, you will have to add a show() function since you are hiding the elements. Here is the full fiddle, working as I think you would expect it to: https://jsfiddle.net/g139c9b0/3/

My best guess as to why you see the odd behavior is that the iframe itself is NOT being treated as part of the current DOM, so hiding it's container won't necessarily cascade to the iframe window. Generally you cannot interact with an iframe using javascript (without some workarounds). It definitely feels like a bit of a browser bug, but it's possible that it works as such for security reasons.

Took a look at the update, if you click on the click here again it doesn't work. Not sure why I would need to hide `#video-popup-iframe-container` if it is inside an element that is already hidden. — bryan, Apr 07 '16 at 17:57
Check out the new fiddle - I think the full example is closer to what you were expecting? — twill, Apr 07 '16 at 18:42

score 1 · Answer 2 · edited May 23 '17 at 12:32

what kind of video are you playing? Is a locally hosted file, a YouTube video, Vimeo? I'm asking because if it is YouTube, maybe you could just use jQuery to stop the video.

this being said, I've tested your code and it seems to work ok.Are you getting any errors on the browser console?

   

 $(".clickme").on('click', function(e){ 
  e.preventDefault();
  $("#video-popup-iframe").attr('src', "//player.vimeo.com/video/"+$(this).attr('id'));
  $("#video-popup-overlay, #video-popup-container").show(); 
    });

$("#video-popup-close, #video-popup-overlay").on('click', function(e){
 
  $("#video-popup-overlay, #video-popup-container").hide();
     $("#video-popup-iframe").attr('src', '');
 });

#video-popup-overlay {
  display: none;
  position: fixed;
  z-index: 995;
  top: 0;
  background-color: #000;
  opacity: 0.8;
  width: 100%;
  height: 100%;
}

#video-popup-container {
  display: none;
  position: fixed;
  z-index: 996;
  width: 60%;
  left: 50%;
  margin-left: -30%;
  top: 20%;
  background-color: #fff;
}

#video-popup-close {
  cursor: pointer;
  position: absolute;
  right: -10px;
  top: -10px;
  z-index: 998;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  text-align: center;
  font-size: 12px;
  background-color: #000;
  line-height: 25px;
  color: #fff;
}

#video-popup-close:hover {
  color: #DE0023;
}

#video-popup-iframe-container {
  position: absolute;
  z-index: 997;
  width: 100%;
  padding-bottom: 56.25%;
  border: 2px solid #000;
  background-color: #000;
  border-radius: 2px;
}

#video-popup-iframe {
  z-index: 999;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="clickme" id="161171581">
Click me
</div>

<div id="video-popup-container">
  <div id="video-popup-close" class="fade">x</div>
  <div id="video-popup-iframe-container">
    <iframe id="video-popup-iframe" src="" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</div>

another possible solution: Stop embedded youtube iframe?

EDIT: take a look at the updated code, is this the expected behavior? EDIT2: https://jsfiddle.net/588chuyb/

I am using vimeo. No errors in the console either. Please look at [my example](https://jsfiddle.net/g139c9b0/1/), it doesn't seem to be working. — bryan, Apr 07 '16 at 17:54
hey bryan, you should take a look at that fiddle above. I think it is working as expected. the issue might be related with the .on('load', function(){ — Alfonso, Apr 08 '16 at 12:46
Thanks Alfonso! That does seem to be the issue. I had the load function so that it wouldn't show the box until the iframe was loaded but I can see that won't work here. I appreciate the help. — bryan, Apr 08 '16 at 14:37
you're very welcome! I'm sure what you want can be achieved, If I have a free moment later I will give it a try :) — Alfonso, Apr 08 '16 at 17:53

score 0 · Answer 3 · answered Apr 07 '16 at 17:33

Try hide before change the src. And look at the console and see if there is some message, it should helps.

$(document).on('click', '#video-popup-close, #video-popup-overlay', function(e){
    $("#video-popup-overlay, #video-popup-container").hide();
    $("#video-popup-iframe").attr("src", "");
});

Changing iframe src stops parent from hiding

Here is an example

3 Answers3