在嵌入的 Youtube 视频前获取 CSS/JS 弹出窗口答案

【问题标题】：Getting a CSS/JS popup in front of embedded Youtube video在嵌入的 Youtube 视频前获取 CSS/JS 弹出窗口
【发布时间】：2013-09-01 01:51:16
【问题描述】：

我的网站通知弹出窗口。弹出窗口使背景变暗，并且位于其他所有内容的前面。只有一个嵌入的 Youtube 视频仍然在弹出窗口的前面，我猜是因为它是 Flash。在 Firefox 中，视频“几乎”在后台，它只是削减了弹出窗口的一些角落，在 IE 中，完整的弹出窗口隐藏在视频后面。我已经尝试为视频提供较低的 z-index，但它不起作用。

#light{
    z-index:1001;
    font-size: 10px;
}

#video{
    margin: 20px 0px 0px 0px;
    z-index:998;
}

<ul>
    <li>
        <iframe id="video" width="500" height="282" src="http://www.youtube.com/embed/F4Z4-KCJ664" frameborder="0" allowfullscreen></iframe>
    </li>
</ul>

【问题讨论】：

标签： video background youtube popup embed

【解决方案1】：

试试这个

用下面的代码替换 iframe 行

<iframe id="video" width="500" height="282" src="http://www.youtube.com/embed/F4Z4-KCJ664?wmode=transparent" frameborder="0" allowfullscreen></iframe>

并且还给出位置：相对于CSS块#light和#video

【讨论】：

您先生，真是个天才！我只是想到了这样的解决方法： function lightbox_open(){ document.getElementById('video').style.display='none';但不幸的是，这会在弹出窗口打开时破坏网站。您的建议很好，谢谢。
请将我的回答标记为有用。单击复选标记。谢谢