CSS视频垂直背景

Question

我正在制作自适应视频作为背景。我希望此视频的高度为100vh，并在用户使用垂直设备方向（例如电话）以保持宽高比时自动裁剪宽度。我也想删除您在下图中看到的白色条。该怎么做？

video{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100vw;
}

@media (pointer:coarse) {
  @media (hover: none), (hover:on-demand) {
    video {
      height:100vh;
    }
  }
}

<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay muted loop></video>

Answer 1

我不知道您的背景处理方法是否适用于视频，但是您可以这样做：

<video id="video">
<source/>
</video>

和

#video{
  position: fixed;
  right: 0;
  bottom:0;
  min-width: 100%; 
  min-height: 100%;
}

这将导致全屏视频在父容器比例不同时被裁剪。

如果要将其用作背景，只需使用内容位置固定的另一个容器即可。您可以在这里找到完整的示例：https://www.w3schools.com/howto/howto_css_fullscreen_video.asp