black screen when removing an embedded youtube video by javascript in IE8

27
votes

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.

2
javascriptjqueryvideo
And how are you removing it. Can we get a demo page maybe with jsfiddle or jsbin? – epascarello
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

2 Answers

45
votes

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.

0
votes

I use this code:

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

});