修复了嵌入 youtube 视频上的 div答案

【问题标题】：Fixed div over embbeded youtube video修复了嵌入 youtube 视频上的 div
【发布时间】：2013-05-23 18:00:29
【问题描述】：

我在嵌入 youtube 视频时遇到问题。

我希望一个固定的 div 覆盖嵌入的 youtube 视频。我知道并阅读了有关该问题的信息，并在源代码末尾添加了?wmode=opaque，但仍然无效。我还尝试了一堆其他变种?wmode=transparent&wmode=transparent

这是 iframe 代码：

<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>

这里是 div css 代码：

#footer{
margin:0 auto;
width:950px;
height:335px;
position:fixed;
bottom:0;

}

我还有一个问题，不知道有没有关系，很奇怪。如果我上 youtube 并尝试在旧视频的位置嵌入另一个视频。它不会改变视频，会改变新视频的宽度，但视频是相同的，我尝试嵌入的另一个视频的新宽度。如果我嵌入旧的 youtube 代码，它将显示新视频。

请帮我解决这两个问题，他们快把我逼疯了！

【问题讨论】：

你能发布一个发生这种情况的例子吗？当我在嵌入式视频上放置一个固定的 div 时，它似乎工作得很好。 Link.
overlay opaque div over youtube iframe的可能重复

标签： html css iframe youtube

【解决方案1】：

你需要在你的页脚上放一个 z-index：

http://jsfiddle.net/P3ysJ/9/

#footer{
    margin:0 auto;
    width:950px;
    height:335px;
    position:fixed;
    bottom:0; 
    z-index: 1000;
    color: #c00;
    font-size: 3em;

}

<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>

<footer id='footer'>overlap</footer>

【讨论】：