Question

我有一个网站，其页眉和页脚位于fixed位置，而中间内容可以滚动。事实上，当我们滚动时，内容应该在页眉或页脚下，因为网站占据了100％的高度，我选择将overflow: auto;应用于正文。中间内容不可能具有特定高度，因为页眉和页脚是固定大小。

我将z-index应用于所有元素，效果很好，但我需要嵌入来自Youtube，Vimeo或其他的视频...通常，这些视频使用iframe或{{1}显示};我的客户端直接将嵌入代码放在后台。这是我的问题：当我scoll时，即使我设置了特定的object，视频也会显示在页眉和页脚之上;中间内容中的其他元素都被隐藏得很好......

你有想法解决这个问题吗？

谢谢！

Answer 1

如果不使用jquery，您可以在“iframe”标记

中简单地使用它

src="http://www.youtube.com/embed/yourVideo?wmode=transparent"

Answer 2

你必须在闪存中将wmode设置为透明。所以在你的嵌入/目标代码中添加wmode="transparent"

或

<param name="wmode" value="transparent" />

Answer 3

添加到Hans的回答：

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

（你仍然需要使用z-index）

Answer 4

添加到Yisela的答案：

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

显示div over video（iframe或object）

4 个答案: