全页视频背景

如何解决全页视频背景

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

如何使视频适合页面并不能移动？

这是代码：

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

如果您确实有帮助，我也想添加一个透明的下拉导航菜单。

解决方法

<video>标记支持CSS属性object-fit。如果将其设置为cover，它将在不改变比率的情况下填充其空间（将对其进行裁剪）。要使视频不滚动，您想使用position: fixed，它将相对于浏览器窗口而不是网页进行定位。

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

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

由于您在包装器上指定了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,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()，并非所有浏览器都完全采用CSS。您也可以使用@media (orientation: landscape)和@media (orientation: portrait)来达到相同的效果。视频包装器固定在页面背景上，视频设置为宽度和高度填充/溢出页面。然后将视频定位在页面背景的中心。

如何解决全页视频背景

解决方法

相关推荐