CODEWITHSUNDEEP
javascriptjqueryvideo
Amr Elgarhy
Amr Elgarhy

Reputation: 68952

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

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.

Upvotes: 27

Views: 7062

Answers (2)

leocats
leocats

Reputation: 1

I use this code:

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

});

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68952

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.

Upvotes: 45

Related Questions