A background video that acts as a CSS background size cover rather than an entire page

Question

I am trying to create a code for a new site where there is a large splash background as a “hero” image. Like on this site, but as a video, where the image of a lady unloads a car: https://www.simple.com

Resize and you will see how the image always fits into the parent.

I put the part of the code that I worked on in JSBin here (didn't make much progress): http://jsbin.com/ruqisa/1/edit

It seems like I am not getting the same behavior with CSS. I want the video to go beyond the parent both in width and in height, depending on the size of the screen.

Has anyone done this using pure CSS? JS I could calculate it manually when resizing, but I would really like to do it using only CSS.

EDIT: I'm not looking for the whole page to be video, just the background title.

Answer 1

Let me adapt the technique outlined in the demosthenes.info blog .

Option 1 - Scroll the page from the page

Parent div:

• fixed height and overflow: hidden

Video:

• stretched with min-width: 100%andmin-height: 100%
• fits for content using z-index: -1(can be any negative number)

To center the video:

• topand leftset to 50%, which places the top left corner in the middle of the parent div
• , transform: translateX(-50%) translateY(-50%);

.

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>

Hide result

2 — ​​

:

• ,
• position: fixed (viewport)
• min-width: 100% min-height: 100%
• z-index: -1 ( )

:

• top left 50%, .
• , transform: translateX(-50%) translateY(-50%);

.

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>

Hide result

Answer 2

.big-splash video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(some.jpg) no-repeat;
  background-size: cover;
}

DEMO: http://jsbin.com/lunarugibe/1/

: HTML5

, top, left transform X Y. -webkit-vendor ( ... HTML5, CSS3 ..).

min-height min-width .

background , . background: cover , .

z-index , .

Answer 3

, CSS:

.container {
    height: 600px;
    width: 100%;
    overflow: hidden;
}

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

If you want to keep it in the center or make a full-screen video, you probably need to use Javascript to calculate the height of the window.