HTML Video IE9 - No Controls or Preview Image

Question

I've used the following code to implement HTML video into a webpage:

<video id='the_video' class='pilot_video' controls="controls">
 <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
 <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
 <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
 <iframe width="560" height="315" src="http://www.youtube.com/embed/Hz9Eh01sEdo?rel=0" frameborder="0" allowfullscreen></iframe>
</video>

This displays fine in IE10, Chrome, Firefox and Safari but with IE9 the controls do not show up and there is no preview image. It just shows a black box and you need to right click on it and select "Play" for anything to come up.

Any ideas why? I'm baffled.

Answer 1

It was due to the fact that the video object was faded in by jQuery after the documented loaded and a link was clicked - I assume it was because of the fading transition that IE9 couldn't handle the video object properly.

What I did was allow the fade in, and once complete I cloned the video object to reinstantiate it.