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

Question

我用这个把我的头发拔掉了。我有一个包含 mp4、ogg 和嵌入式 mp4 回退的 HTML5 视频元素。在嵌入后备 (IE8) 上，我遇到的任何事情都不允许我使用 z 索引在其上方构建固定定位元素 (#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/

用于在 IE8 中查看的 JSfiddle:http://jsfiddle.net/x4MAh/embedded/result/

干杯!乍得

Answer 1

我用以下内容更新了你的 fiddle :

• 使用绝对而非固定的定位。如果用户滚动，您的叠加层将保留在屏幕上(如果它是固定的)。
• 使用 css 将叠加层的大小调整为视频的大小，并使其高度为自动，然后
• 使用 fitvidsjs.com 动态调整视频大小