Full Page Video Background

Question

I'm trying to have a full page video background as the landing page for my site. I have the width correct but it doesn't fit the page (there's a white rectangle of nothingness at the bottom). Also, when I scroll, it allows me to pull up and see more blank space.

How do I get the video to fit the page and not move?

Here's the code:

* {
margin: 0;
padding: 0;
}

.video-section {
position: relative;
width: 100%;
max-height: 150%;
overflow: hidden;
}
#video-elem {
width: 100%;
height: 200%;
}
video::-webkit-media-controls {
display:none !important;
}
.video-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 0.3s ease;
}
.video-overlay:hover {
opacity: 1;
}
.video-overlay h1 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-transform: uppercase;
font-size: 3em;
color: #000;
text-align: center;
}

<div class="video-section">
    <video id="video-elem" preload="auto" autoplay="true" loop="loop" muted="muted" poster="Inclusiv.png">
        <source src="inclusiv.mp4" type="video/mp4">
        Video not supported
    </video>
</div>

I would also like to put in a transparent drop-down navigation menu if you're feeling really helpful.

Thanks, Becky - can't believe I missed that. It doesn't change the fit of the video though — FlexBoxer, Sep 27 '20 at 17:08
Answer to similar question: https://stackoverflow.com/a/49468657/2463800 — Trevin Avery, Sep 27 '20 at 18:03

score 2 · Accepted Answer · answered Sep 27 '20 at 18:00

The <video> tag supports the CSS property object-fit. If you set this to cover, it will fill its space without changing ratio (it will crop it). To keep the video from scrolling, you want to use position: fixed which will position it relative to the browser window, not the webpage.

* {
    margin: 0;
    padding: 0;
}

.video-section {
    position: fixed;
    width: 100vw;
    height: 100vh;
}
#video-elem {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
video::-webkit-media-controls {
    display:none !important;
}

<div class="video-section">
    <video id="video-elem" preload="auto" autoplay="true" loop="loop" muted="muted" poster="https://via.placeholder.com/1920x1080">
        <source src="inclusiv.mp4" type="video/mp4">
        Video not supported
    </video>
</div>

score 0 · Answer 2 · answered Sep 27 '20 at 17:55

Videos have a fixed width and height, so it's necessary to determine which of these sizes is greater and make that the minimum for the video. If the device were in landscape mode, it would be necessary to stretch the width (assuming the video is landscape); if in portrait, it would be necessary to stretch the height.

I'm assuming that you want the video to be cropped instead of stretched, since you specified overflow: hidden on the wrapper.

Here's what I would do:

* {
  margin: 0;
  padding: 0;
}

.video-section {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#video-elem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: max(100vw, 100vh);
}

video::-webkit-media-controls {
  display: none !important;
}

.video-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-overlay:hover {
  opacity: 1;
}

.video-overlay h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-transform: uppercase;
  font-size: 3em;
  color: #000;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="video-section">
      <video id="video-elem" preload="auto" autoplay="true" loop="loop" muted="muted" poster="Inclusiv.png">
        <source src="inclusiv.mp4">
        Video not supported
      </video>
    </div>
  </body>

This uses CSS max(), which isn't fully adopted by all browsers. You could also use @media (orientation: landscape) and @media (orientation: portrait) to achieve the same effect. The video wrapper is fixed to the background of the page, and the video is set to have its width and height fill/overflow the page. The video is then positioned to be centered on the page background.

Full Page Video Background

2 Answers2