时间戳

首页 > 解决方案 > Css视频垂直背景

html - Css视频垂直背景

问题描述

我正在制作响应式视频作为背景。我希望该视频的高度为 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>

在此处输入图像描述

标签： htmlcss

解决方案

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

<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

推荐阅读