27

I use this code to let users embed youtube videos on a website i am building: 

function BuildYoutubePlayer(youtubeVideoId, width, height) {
    youtubePlayer = "<iframe ";
    youtubePlayer += "width=\"" + width + "\" ";
    youtubePlayer += "height=\"" + height + "\" ";
    youtubePlayer += "src=\"http://www.youtube.com/embed/" + youtubeVideoId + "\"&amp;wmode=transparent ";
    youtubePlayer += "frameborder=\"0\" allowfullscreen>";
    youtubePlayer += "</iframe>";

    return youtubePlayer;
}

This embed will be in a layer as lightbox popup, when the user closes this popup, the video removed from the html, but I get a black full screen just on IE8, I can't find any reason, I tried embedding youtube video and removing it, and it worked fine, so sure I am missing something. please advice.

Dan
  • 10,303
  • 5
  • 36
  • 53
Amr Elgarhy
  • 66,568
  • 69
  • 184
  • 301
  • And how are you removing it. Can we get a demo page maybe with jsfiddle or jsbin? – epascarello Sep 17 '11 at 04:36
  • I have encountered this before, as a problem in all browsers (but mostly ie). It seems to revolve around iframe rendering. Destroying that part of the dom can cause unique errors. Similar things happen when trying to animate the position of an iframe before its loaded, or destroy it before its hidden. – Fresheyeball Sep 17 '11 at 04:41

2 Answers2

45

I solved that by hiding the iFrame before removing it while removing the parent popup.
So I say $('iframe').hide(); then $('myContainerPopup').remove();

I faced this problem just on IE8 and youtube videos, didn't test on IE7 but on all other browsers things were working fine.

Amr Elgarhy
  • 66,568
  • 69
  • 184
  • 301
  • This fix worked for me. I was using jQuery's `empty()` on an element containing an embedded (iframe) youtube video. Calling `hide()` before empty worked, but the reverse order caused a IE8 black screen (which also killed IE developer tools). In my (limited) testing, the issue did not effect IE7, but only IE8. – zlovelady Jan 07 '12 at 01:30
  • btw it works fine in IE7, without using hiding the iframe. silly IE – defau1t May 24 '12 at 14:18
  • This happens in IE 9 also. And I managed to find an interesting thing about the issue. I was debugging using IE dev tools and when I was navigating back to the previous page, IE used to show a black screen. At last I found out that when my dev tools height was big enough to overlap that video and go back, the issue wouldnt occur. Its like if you have your video is at the bottom of the page and you navigate the issue wont occur. It will only occur when it is visible to the eye :D spent half a day finding the cause of the issue ... thanks for the question and the answer :) – Mandeep Jain Jun 03 '13 at 14:43
  • so, for those of us not using JQuery, does the hide function set the display attribute to none and that's it? – dev4life Nov 07 '13 at 03:44
  • @user2070775 yes it just do that. – Amr Elgarhy Nov 07 '13 at 06:27
  • Unbelievable, still happening in IE11 and probably also in Edge; different name, same crap. Fortunately your solution also works there! – Stijn Geukens Jan 16 '17 at 13:19
0

I use this code:

$(document).ready(function() {
$('.popup-gallery').magnificPopup({
    callbacks: {
        open: function() {$('iframe').hide();},
        close: function() {$('iframe').show();}
    }   
});

});

leocats
  • 1