Youtube视频显示在厚箱或灯箱下方

Question

我有一些嵌入式YouTube视频，我有一个显示在页面其余部分顶部的div。问题是，如果不向youtube嵌入代码添加一些额外的参数（wmode = opaque），youtube视频就会出现在灯箱上方。

有没有更好的方法来实现这一目标？像某种CSS我可以添加到灯箱div？

注意：我没有专门使用灯箱或厚箱，只是我自己的基本代码。我用于灯箱div的css是：

#shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: 000;
z-index: 1001;
}

Answer 1

不幸的是，flash优先于您设置的任何z-index。这有点痛苦，但你能做到的唯一方法就是使用wmode。见this answer。如果您不想或不能在YouTube元素中设置wmode，那么您可以执行许多脏黑客攻击。

注意这些是很糟糕的JS HACKS

• 在显示灯箱之前隐藏视频，然后在退出时显示
• 显示灯箱时，使用静态图像替换flash对象。退出时改回来。
• 使用flash叠加层代替html one

不要这样做

Answer 2

你可以追加

?wmode=opaque

在youtube视频链接的末尾

来源： http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/