This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have failed. Am I overlooking something crucial? Is it even achievable?
Here is 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>
And this is 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 experimented with setting the wmode to "opaque" in multiple ways, played around with z-indexes for each element, but haven't made any progress. I'm certain I'm not the first to encounter this issue, and I doubt I'll be the last.
View JSfiddle here: http://jsfiddle.net/x4MAh/
For testing in IE8, check out this JSfiddle: http://jsfiddle.net/x4MAh/embedded/result/
Cheers! Chad