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

javascriptjqueryvideo

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.

Best Answer

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.

Related Topic