title: IE9+8 HTML5 Video - video loads but "invisible"
body: <p>I have an html5 video tag on a page, with a flash fallback for IE8. The video is hidden with display:none and attached to parent 'a' until a play button (image) is pressed. At that point the video element is moved to parent 'b' (a box within an overlay) and i call jQuery's show().</p>
  
  <p>On Chrome, FF and Safari, the video shows. However, on IE9 and IE8, the video doesn't show, but is there. Meaning, I can right click where it should be and will get a video related context menu. If I click play at that point, the video will appear and play regularly.</p>
  
  <p>Another way to get the video to appear, is to change some of the css for the video element. For instance, changing the box-sizing from what it is (border-box) to content-box will make the video appear, and vice versa.</p>
  
  <p>Trying to do that from that console works. On the other hand, trying to do that within my script doesn't. </p>
  
  <p>Here's the css for the video element and whatever it inherits:</p>
  
  <pre><code>*, html &gt; * { box-sizing: border-box; }
  audio, canvas, video { display: inline-block; }
  .center { text-align: center; }
  #section1 #videobox .videoPlayer { cursor: pointer; }
  
  #video {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      z-index: 10003;
  }
  </code></pre>
  
  <p>I'm guessing this might be a weird layout problem (I would say hasLayout, but thankfully i'm not dealing with IE6/7).</p>
  
  <p><strong>Update</strong>
  I've managed to duplicate the problem within a jsfiddle: <a href="http://jsfiddle.net/e76x5/5/" rel="nofollow">http://jsfiddle.net/e76x5/5/</a></p>