Iframe 内容不响应 IE 中的 wmode

Question

我有一个 Bootstrap 项目，其中包含有关点击事件的视频。加载视频在所有浏览器上都能正常工作，但无论我做什么，我都无法让 iframe 内容显示在 IE 中其余网站内容的下方（即使是最新版本）。我到处搜索并尝试了 wmode=opaque 或 transparent 的所有变体，但似乎没有任何效果。

如有任何帮助，我们将不胜感激 - 谢谢！

代码如下： HTML:

<div class="video-container" data-url="https://www.youtube.com/embed/OPf0YbXqDm0">
            <img class="posterframe" src="img/video-poster-frame.gif" alt="Video placeholder image" />
          </div>

jQuery:

var videos  = $(".video-container");
    videos.bind("click", function(){
        var url = $(this).data('url');
        var elm = $(this),               
        ifr     = '<iframe width="100%" height="357" frameborder="0" allowfullscreen src="' + url + '?wmode=opaque?rel=0&autoplay=1"></iframe>';
        elm.addClass("player").html(ifr);
        elm.off("click");
    });

Answer 1

为了将来参考，将更新后的 jQuery 代码片段放入其中。

$(".video-container").bind("click", function(){
    var url = $(this).data('url');
    var elm = $(this),               
    ifr     = '<iframe width="100%" height="357" frameborder="0" allowfullscreen src="' + url + '?wmode=opaque&rel=0&autoplay=1"></iframe>';
    elm.addClass("player").html(ifr);
    elm.off("click");
});

Iframe 内容不响应 IE 中的 wmode

Iframe content not responding to wmode in IE

iframe

jquery

internet-explorer

z-index