title: HTML5 Video player IE8 Embed fallback vs fixed positioned element
body: <p>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?</p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;div id="fixed"&gt;&lt;/div&gt;
  
  &lt;video width="320" height="240" controls&gt;
    &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
    &lt;source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"&gt;
    &lt;param name="wmode" value="opaque" /&gt;
    &lt;embed src="http://www.w3schools.com/html/movie.mp4" wmode="opaque"&gt;
        &lt;param name="wmode" value="opaque" /&gt;
    &lt;/embed&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;
  </code></pre>
  
  <p>my CSS: </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>JSfiddle: <a href="http://jsfiddle.net/x4MAh/" rel="nofollow">http://jsfiddle.net/x4MAh/</a></p>
  
  <p>JSfiddle for viewing in IE8: <a href="http://jsfiddle.net/x4MAh/embedded/result/" rel="nofollow">http://jsfiddle.net/x4MAh/embedded/result/</a></p>
  
  <p>Cheers!
  Chad</p>