全页视频背景

Question

我正在尝试将整页视频背景作为我网站的登录页面。我的宽度正确，但它不适合页面（底部有一个空白的白色矩形）。此外，当我滚动时，它允许我向上拉并看到更多空白 space.

如何让视频适合页面而不移动？

代码如下：

* {
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>

如果您觉得对您有帮助，我还想加入一个透明的下拉导航菜单。

Answer 1

视频具有固定的宽度和高度，因此有必要确定这些尺寸中的哪一个更大，并将其设为视频的最小尺寸。如果设备处于横向模式，则需要拉伸宽度（假设视频是横向的）；如果是竖屏，就需要拉伸高度。

我假设您希望视频被裁剪而不是 拉伸， 因为您指定了 overflow: hidden包装纸。

我会这样做：

* {
  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>

这使用 CSS max()，并非所有浏览器都完全采用。您也可以使用 @media (orientation: landscape) 和 @media (orientation: portrait) 来达到同样的效果。视频包装器固定在页面的背景上，视频的宽度和高度设置为 fill/overflow 页面。然后将视频置于页面背景的中央。

Answer 2

<video>标签支持CSS属性object-fit。如果将其设置为 cover，它将填充其 space 而不会改变比例（它会裁剪它）。要防止视频滚动，您需要使用 position: fixed，它会相对于浏览器 window 而不是网页进行定位。

* {
    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>

全页视频背景

Full Page Video Background

html

css

video

background

navbar