HTML5 Video player IE8 Embed fallback vs fixed positioned element

问题

I'm pulling my hair out with this one. I have an HTML5 Video element containing an mp4, ogg, and an embedded mp4 fallback. On the embed fallback (IE8), nothing I have come across has allowed me to structure the fixed positioned element (#fixed) above it with z-indexing. Am I missing something? Or is it even possible?

My markup:

<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>

my 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;
}

I've tried setting the wmode to opaque a couple of different ways, have played with z-indexing on each element, and still have had no luck. I'm sure I'm not the first to run across this issue, and I'm sure I won't be the last, either.

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

JSfiddle for viewing in IE8: http://jsfiddle.net/x4MAh/embedded/result/

Cheers! Chad

回答1:

I updated your fiddle with the following:

• Use absolute, not fixed, positioning. If user scrolls, your overlay will stay on the screen if it's fixed.
• Size your overlay to the size of the video with css and make it height: auto, then
• use fitvidsjs.com to resize the video dynamically

来源：https://stackoverflow.com/questions/18751612/html5-video-player-ie8-embed-fallback-vs-fixed-positioned-element