在 IE8 中通过 javascript 删除嵌入的 youtube 视频时出现黑屏答案

【问题标题】：black screen when removing an embedded youtube video by javascript in IE8在 IE8 中通过 javascript 删除嵌入的 youtube 视频时出现黑屏
【发布时间】：2011-09-17 04:17:27
【问题描述】：

我使用此代码让用户在我正在构建的网站上嵌入 youtube 视频：

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;
}

这个嵌入将在一个层中作为灯箱弹出窗口，当用户关闭这个弹出窗口时，视频从 html 中删除，但是我在 IE8 上得到一个黑色的全屏，我找不到任何原因，我尝试嵌入youtube视频并删除它，它工作正常，所以我肯定错过了一些东西。请指教。

【问题讨论】：

你是如何删除它的。我们可以用 jsfiddle 或 jsbin 获得一个演示页面吗？
我以前遇到过这个问题，在所有浏览器中都是一个问题（但主要是 ie）。它似乎围绕着 iframe 渲染。破坏 dom 的那部分可能会导致独特的错误。尝试在加载之前为 iframe 的位置设置动画时会发生类似的情况，或者在隐藏之前将其销毁。

标签： javascript jquery video

【解决方案1】：

我通过在删除父弹出窗口时隐藏 iFrame 来解决这个问题。
所以我说$('iframe').hide(); 然后$('myContainerPopup').remove();

我只在 IE8 和 youtube 视频上遇到过这个问题，没有在 IE7 上测试，但在所有其他浏览器上一切正常。

【讨论】：

这个修复对我有用。我在包含嵌入式（iframe）youtube 视频的元素上使用了 jQuery 的 empty()。在 empty 工作之前调用hide()，但相反的顺序导致 IE8 黑屏（这也杀死了 IE 开发工具）。在我的（有限）测试中，该问题并未影响 IE7，而仅影响 IE8。
顺便说一句，它在 IE7 中运行良好，无需隐藏 iframe。愚蠢的IE
这也发生在 IE 9 中。我设法找到了一个关于这个问题的有趣的事情。我正在使用 IE 开发工具进行调试，当我导航回上一页时，IE 曾经显示黑屏。最后我发现当我的开发工具高度足够大到可以重叠该视频并返回时，问题就不会发生了。就像您的视频位于页面底部并且您浏览该问题时不会发生一样。它只会在肉眼可见时发生：D花了半天时间寻找问题的原因......感谢您的问题和答案:)
那么，对于我们这些不使用 JQuery 的人，隐藏函数是否将显示属性设置为无，仅此而已？
@user2070775 是的，它就是这么做的。

【解决方案2】：

我使用这个代码：

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

});

【讨论】：