Question

我遇到嵌入式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代码嵌入它将显示新视频。

请帮我解决这两个问题，他们让我抓狂！

Answer 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>

修复了嵌入式YouTube视频的div

1 个答案: