I have an HTML5 video tag on a webpage, along with a flash fallback for Internet Explorer 8. The video element is initially hidden using display:none and attached to a parent 'a' until a play button (image) is clicked. When the play button is pressed, the video element is then moved to parent 'b' (a box within an overlay) and I use jQuery's show() method.
When viewing the page in Chrome, Firefox, and Safari, the video appears as expected. However, when I try to view it in IE9 and IE8, the video does not display visually, even though it is present. If I right-click where the video should be, I see a video-related context menu. Clicking play at that point makes the video appear and play normally.
Interestingly, changing certain CSS properties of the video element can sometimes make the video display. For example, switching the box-sizing property from border-box to content-box may cause the video to suddenly become visible, and vice versa.
While making these changes through the browser console seems to work, attempting to do so within my script does not produce the desired result.
Below is the CSS styling for the video element and its inherited properties:
*, html > * { 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;
}
It seems like this issue might be related to a peculiar layout problem, although luckily it doesn't involve dealing with hasLayout issues found in older versions of IE.
Update I was able to replicate the problem in a JSFiddle demo: http://jsfiddle.net/e76x5/5/