HTML Video only Appears on Window Resize

Question

I am trying to use the vide.js jQuery extension to add a video background to one of my divs. The code for the video div is as follows:

<div id="header" data-vide-bg="mp4: graphics/videos/identity.mp4, webm: graphics/videos/identity.webm, ogv: graphics/videos/identity.ogv, poster: graphics/videos/equations.png" data-vide-options="posterType: 'detect', loop: true, muted: true, position: 0% 0%">

It works sometimes, but if the browser cache is cleared and the page is refreshed (ctrl/cmd + shift + R in Chrome), the video does not show up until the browser window is resized.

I have also tried using jQuery to add the video to the div programmatically, to no avail.

You can see the issue live at this address.

Answer 1

As far as i can see, <video> element is not picking its height properly.. settings styles in css to height: 100% will fix the problem