在视频上显示 div（iframe 或对象）答案

【问题标题】：Display div over video (iframe or object)在视频上显示 div（iframe 或对象）
【发布时间】：2011-12-13 10:23:46
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： html css iframe

【解决方案1】：

不使用 jquery，您可以在“iframe”标签中简单地使用它

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

【讨论】：

【解决方案2】：

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

或

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

【讨论】：

问题是：我不能强迫我的客户在嵌入代码中手动添加这个代码。如果我在加载后用 Javascript 添加它，你认为它可以工作吗？
是的，您可以在加载时编写属性（将其添加为答案）
嗯.. 我不认为你可以，因为它会在你创建它时立即获取它的参数......你可能会检测到 Flash 电影，剥离它（所以获取文件名、参数和宽度/高度并用透明模式重建它...
那太可惜了，但我知道它至少适用于 youtube！

【解决方案3】：

补充汉斯的回答：

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

（你仍然必须使用 z-index）

【讨论】：

优秀。这正是我所需要的。

【解决方案4】：

添加到 Yisela 的回答中：

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

【讨论】：