Html 在另一个div下滚动带有youtube视频的div_Html_Css_Youtube

Html 在另一个div下滚动带有youtube视频的div

html css youtube

Html 在另一个div下滚动带有youtube视频的div,html,css,youtube,Html,Css,Youtube,我有我的HTML如下 <html> <body> <div id="d1" style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000"> </div> <div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;"&

我有我的HTML如下

<html>
<body>
<div id="d1" 
  style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000"> 
</div>

<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315" 
   src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

顶部分区（d1）是固定的。虽然滚动底部分区（d2）位于顶部分区之后，但youtube视频保持领先

我想把它放在top div后面。有没有办法？？？

问题可能是iframe将flash youtube视频放在顶部。它与Flash对象的z索引有关

我以前成功地使用过这个解决方案

将Flash内容放入名为Flash的包装器div中
添加到对象标记中
将wmode=“transparent”添加到嵌入标记中
使用CSS设置div的位置和z索引（不要设置负的z索引值，因为它会隐藏Flash）

使用此css：

#flash {
    position: relative; /*or absolute*/
    z-index: 0;
}

编辑：您必须删除Iframe。首先，Wich可能是个好主意，因为iframe很烂：p

问题可能是iframe在上面放着flash youtube视频。它与Flash对象的z索引有关

我以前成功地使用过这个解决方案

将Flash内容放入名为Flash的包装器div中
添加到对象标记中
将wmode=“transparent”添加到嵌入标记中
使用CSS设置div的位置和z索引（不要设置负的z索引值，因为它会隐藏Flash）

使用此css：

#flash {
    position: relative; /*or absolute*/
    z-index: 0;
}

编辑：您必须删除Iframe。首先，这是个好主意，因为iframe很烂：p

这是因为ActiveX对象往往位于所有html元素之上。你必须在你的电脑中添加一个“无窗口”模式

<object>
    <param name="wmode" value="window" />
</object>

这是因为ActiveX对象往往位于所有html元素之上。你必须在你的电脑中添加一个“无窗口”模式

<object>
    <param name="wmode" value="window" />
</object>

以下是我解决问题的方法

<html>
<body>
<div id="d1" 
  style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000"> 
</div>

<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315" 
   src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent" 
     frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

注意：iframe的src中的“wmode=transparent”，下面是我如何解决它的

<html>
<body>
<div id="d1" 
  style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000"> 
</div>

<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315" 
   src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent" 
     frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

注意？wmode=transparent“在iframe的src中，当我遇到类似情况时，我尝试了什么：

 #bridgeDIV
{
position:relative;
}

#riverDIV
{
position:fixed;
overflow-y:scroll;
}

想象一下桥下流过的河流。

当我遇到类似情况时，我尝试了什么：

 #bridgeDIV
{
position:relative;
}

#riverDIV
{
position:fixed;
overflow-y:scroll;
}

想象一下桥下的河流。

或者你可以像Adi的链接所建议的那样，将wmode=“不透明”>添加到你的标记中：）我已经删除了iframe并使用了object标记。但是它没有效应器，你可以像Adi的链接所建议的那样将wmode=“不透明”>添加到你的标记中：）我已经删除了iframe并使用了object标记。但它没有效果我尝试过但youtube iframe在添加wmode=“transparent”后得到disapear我尝试过但youtube iframe在添加wmode=“transparent”后得到disapear