解决FF&IE浏览器下DIV下拉菜单被视频挡住的方法

今天工作的时候，遇到一个客户需要修改的问题：DIV下拉菜单被视频挡住。

我想在做网页前台的时候，很多朋友都会遇到这样的问题：

1.        Div层被flash挡住。

2.        Div层被Select挡住。

3.        Div层被视频文件挡住。

前两个问题，有很容易的方法去解决，在这里我就不讲解了。第三个问题，是个很麻烦的事情，接到这个修改后，当时就觉得情况不乐观，会花掉不少的时间。

在网上找了很多资料，最常见的是说用iframe来解决；也许是我的方法不对吧，我在测试的时候用<iframe src="包含视频的静态页"....></iframe>也无法达到效果，Div层依然会被挡住。

怎么解决呢？呵呵，不卖关子了，将代码放在下面，希望能给大家一个参考：

<div style="position: relative; width: *; height: *; overflow:hidden;">

　　<embed  src="视频文件地址" width="*" height="*" WindowlessVideo="1"></embed>

</div>

 

首先： WindowlessVideo="1"，这个很重要，这个参数的具体意思，大家可以在网上找参考资料，这里我不详述了。通过增加这个参数，在IE系列的浏览器下，都可以让Div层正常的显示在视频文件上方了。

 

其次：style="position: relative; width: *; height: *; overflow:hidden;"，为什么要增加这一个呢？其实我也不知道为什么要加这个，当初在IE下测试成功的时候，发现在FF下会再现两个视频画面，一个是动的，而另一个是静止的，而静止的画面会随着下拉菜单的切换而变化（有点类似PrintScreen的感觉）。在FF下可以充分理解WindowlessVideo是什么意思了。所以，我就萌发了用div来包含<embed...></embed>，再给他一个相对定位（绝对定位我没测试），然后保险起见，顺便定义了宽度、高度及溢出（是否必要，没经测试）。

 

测试：OK，事情就这样解决了。希望对大家的工作有点小小的帮助。