How to set html5 video height?

Question

I am trying to set html5 video as a full page background, so I want to achieve 100% of the width and height that I got in this code:

.container{
  width:100%;
  height:100%;
  overflow:hidden;
}
#video{
  width:100%;
  height:100%;
}
video{
  width:100%;
  height:auto;
}

But as you narrow the page, the height of the video gets shorter. See: http://jsfiddle.net/qe7hR/9/

However, I want to do something like this: http://www.bkwld.com/ As you narrow the page height, the height of the video is still fixed at the height of the page.

No matter what I tried, it didn’t work. Do I need to use jquery / js for this? How do I achieve this?

Thanx in advance!

Answer 1

Replace

video{
  width:100%;
  height:auto;
}

By

video{
    min-width:100%;
    min-height:100%;
}

to your CSS

Fiddle