Background video that acts like CSS' background size cover of an element, not entire page

Question

I'm trying to code up a new site where there's a big splash background as a "hero" image. Like this site has, but as a video where the image is of the lady unloading the car: https://www.simple.com

Resize and you can see how the image always fits within it's parent.

I put some of the code I've been working on in JSBin here (not making much progress): http://jsbin.com/ruqisa/1/edit

I can't seem to get that same behavior with CSS. I want the video to spill outside the parent either width or height wise depending on the dimensions of the screen.

Has anyone done this with pure CSS? JS I could calculate it manually on resize, but I'd really love to do this with just CSS.

EDIT: I'm not looking for the entire page to be a video, just the header background.

Answer 1

Let's adapt the technique outlined on the blog demosthenes.info.

Option 1 — Scroll with the page

The parent div:

• is given a fixed height and overflow: hidden

The video:

• is stretched with min-width: 100% and min-height: 100%
• is placed behind content with z-index: -1 (can be any negative number)

To center the video:

• top and left are set to 50% which places the top-left corner in the middle of the parent div
• the video is offset by half the height and width by dragging it halfway up and to the left with transform: translateX(-50%) translateY(-50%);

Simplified example

Here is a full demo with all your markup.

body {
  height: 200vh;
  margin: 0;
}
div {
  height: 500px;
  overflow: hidden;
  position: relative;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
  transform: translateY(-50%) translateX(-50%);
}

<div>
  <video autoplay muted loop>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
</div>

2 — Fixed full page background

The video:

• doesn't need a wrapper, it can be placed anywhere on the page
• is made position: fixed and will position itself in relation to the browser window (viewport)
• is stretched with min-width: 100% and min-height: 100%
• is placed behind content with z-index: -1 (can be any negative number)

To center the video:

• top and left are set to 50% which places the top-left corner in the middle of the screen
• the video is offset by half the height and width by dragging it halfway up and to the left with transform: translateX(-50%) translateY(-50%);

Simplified example

Here is a full demo with all your markup.

body {
  margin: 0 auto;
  padding: 50px;
  color: #FFF;
  width: 600px;
}
video.background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
}

<h1>I am content</h1>
<p>I am content too!</p>
<video class="background" autoplay muted loop>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>