HTML5: header and video at exactly 100% height

[dc_dweller]

Hi all,

 

I want my web site to look like this NYC Auto Show site:

https://www.autoshowny.com/

Notice that the header and the full-screen video below it occupy 100% of the screen height, and there are sections below that as well. 

What HTML5/CSS3 code should I use to achieve that effect? I tried header {height: 10%}  .videosection {height: 90%} while setting the video width and height to 100%, but that did not work.

 

Thanks in advance!

[Ingolme]

The section would be 100% height, with a header in it. The <video> element would be in the background using position: absolute and a negative z-index. A percentage height won't be recognized unless the document root also has a specified height, so the html and body elements need to be set to 100% as well.

The following code is just the beginning, it's probably going to need tweaking so don't just copy it, learn from it.
 

<section class="main">
  <video></video>
  <header>
    [Logo]
    [Menu]
  </header>
  [More content]
</section>

html,body {
  height: 100%; /* Necessary to recognize 100% as 100% of the window */
}

.main {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main video {
  position: absolute;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

.main header {
  color: #FFF;
  background: #000;
}

 

[dc_dweller]

Thanks a lot, this is very helpful!