Question

我想知道是否可以为屏幕（笔记本电脑992px）播放视频背景，为小型设备播放没有视频的黑色背景。

我已经制作了一个带视频背景的example。

HTML代码

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Login/Logout animation concept</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
</head>

<body>
 <header class="video-header container">
  <div class="fullscreen-video-wrap">
    <video src="https://s3.envato.com/h264-video-previews/35654d71-df62-4468-9680-6c0bf9a95ff2/12292237.mp4" autoplay="true" muted="true" media="screen and (min-width:800px)">
    </video>
  </div>
 </header>
</body>

</html>

CSS代码

.video-header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.container {
  max-width: 960px;
  padding: 0 10px;
  margin: auto;
  text-align: center;
}

.fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

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

希望有人可以帮我解决这个问题。提前谢谢！

Answer 1

只需使用媒体查询并为不同的屏幕设置不同的背景。 https://www.w3schools.com/css/css3_mediaqueries_ex.asp

响应背景（视频背景和背景颜色）

1 个答案: