Jump to content

HTML5: header and video at exactly 100% height


Recommended Posts

Hi all,


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


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!

Link to comment
Share on other sites

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">
  [More content]
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;


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...