如何在 Youtube 视频（z-index）上显示 div？答案

【问题标题】：How to show a div over a Youtube video (z-index)?如何在 Youtube 视频（z-index）上显示 div？
【发布时间】：2011-10-24 09:44:36
【问题描述】：

标签： flash video youtube z-index

【解决方案1】：

我在嵌入“链接”的末尾添加了 ?wmode=opaque，它对我有用。

http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque 为我工作。所以完全是

 <iframe width="250" height="188" src="http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque" frameborder="0" allowfullscreen></iframe>

【讨论】：

2 年过去了，但我还是要感谢你，你救了我的命 ;)

【解决方案2】：

显然，当使用 iframe 时，它会自动将 wmode 设置为窗口化，因此请尝试通过修改 iframe src 直接设置 flash 播放器的 wmode，如下所示：

src="http://www.youtube.com/v/8lVJV--SrGg?loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1&wmode=opaque"

如您所见，我在参数列表的末尾添加了&wmode=opaque。这应该使您现在可以覆盖一个 div。参数也以? 开头，而不是&。

【讨论】：

它似乎在 Safari 中有效，但在 Chrome 中仍然无效。有谁知道这是为什么？此外，在 Firefox 中，视频会缩小到缩略图大小（我不知道为什么），但 div 会显示在视频上，所以至少可以。
不确定为什么它在 Chrome 中不起作用。对于 Firefox 问题，使用宽度和高度的实际值而不是百分比，例如<iframe width="425" height="349"。此外，如果 wmode=opaque 没有在浏览器中生成您想要的解决方案，请尝试使用 wmode=transparent。
我希望视频充满浏览器窗口，而不是具有特定大小。关于如何解决这个问题的任何想法？
iframe 很复杂。 Youtube 确实为您提供了使用旧嵌入代码的选项，这将使您可以更轻松地设置完整的浏览器屏幕和宽度以及覆盖 div。
您可能还需要添加 &rel=0 才能使其工作，至少在 Chrome 中是这样。

【解决方案3】：

在 rel=0 之后（我已经有了这个）我添加了这个 &modestbranding=1&wmode=opaque" 现在它适用于所有主要浏览器，包括 IE11.0。所以，这对我有用。非常感谢，2015 年新年快乐！给这个社区的所有成员。

【讨论】：

【解决方案4】：

试试这个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">@import "reset.css";</style> 
        <style type="text/css">
            body {
            background:#000;
            font:62.5%/240% Helvetica, Arial, sans-serif;
            overflow:hidden; /* To avoid showing a scrollbar */
            }
            div {
            background:#f00;
            position:absolute;
            min-width:100%;
            min-height:100px;
            z-index:99; 
            }
            iframe {
            position:absolute;
            min-width:100%;
            min-height:100%;
            }
        </style>
    </head>
    <body>
        <div></div>
        <iframe src="http://www.youtube.com/v/8lVJV--SrGg?loop=1" frameborder="0"></iframe>
    </body>
    </html>

【讨论】：