Question

我正用这个把头发拉出来。我有一个HTML5视频元素，包含mp4，ogg和嵌入式mp4后备。在嵌入式回退（IE8）中，我遇到的任何事情都不允许我使用z-indexing构建其上方的固定定位元素（#fixed）。我错过了什么吗？或者甚至可能吗？

我的标记：

<div id="fixed"></div>

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
  <param name="wmode" value="opaque" />
  <embed src="http://www.w3schools.com/html/movie.mp4" wmode="opaque">
      <param name="wmode" value="opaque" />
  </embed>
  Your browser does not support the video tag.
</video>

我的CSS：

body {
    min-height: 300px;
}
#fixed {
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    background: #f0f;
    z-index: 2;
}
video {
    position: relative;
    z-index: 1;
}
embed {
    position: relative;
    z-index: 1;
}

我已经尝试将wmode设置为不透明的几种不同的方式，在每个元素上使用z-indexing，但仍然没有运气。我敢肯定，我不是第一个遇到这个问题的人，而且我相信我也不会是最后一个。

JSfiddle：http://jsfiddle.net/x4MAh/

JSfiddle在IE8中查看：http://jsfiddle.net/x4MAh/embedded/result/

干杯！乍得

Answer 1

我用以下内容更新了你的小提琴：

使用绝对定位，而不是固定定位。如果用户滚动，您的叠加层将保留在屏幕上（如果已修复）。
使用css将叠加层调整为视频大小，并将其设置为高度：auto，然后
使用fitvidsjs.com动态调整视频大小

HTML5视频播放器IE8嵌入后退与固定定位元素

1 个答案: