HTML背景视频调整为响应的屏幕大小

Question

我的HTML背景视频存在问题。 我在Stack Overflow上发现了一些文章，并将它添加到我的HTML和CSS中。 但它似乎没有用，它要么不会变得敏感，要么与我的其他div和元素混淆。

我有一张照片： （视频元素的容器背景颜色为黄色）

以下是代码：

.container {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   box-shadow:  0px 10px 24px 0px rgba(50, 50, 75, 0.49);
   font-size: 0;
   background-color: yellow;
   margin: auto;
   z-index: -1000;
}

.container video {
   min-width: 100%;
   min-height: 100%;

   width: auto;

   position: absolute;

   height: auto;
   max-height: 100%;
   width: 100%;
}

如您所见，视频宽度不适合屏幕尺寸。我试过object-fit，但这会让它无法响应。

Answer 1

诀窍是让您的容器height: 0然后将视频的宽高比应用于容器padding-bottom。您可以通过将高度除以宽度并乘以100来获得视频的宽高比，以获得百分比值。然后定位视频以占据容器中的整个空间。

我的示例中的视频是320x176。 （176/320）* 100 = 55％。

* {margin:0;}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
  font-size: 0;
  background-color: yellow;
  margin: auto;
  z-index: -1000;
  padding-bottom: 55%;
}

.container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

<div class="container">
  <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video>
</div>

Answer 2

如果您希望视频始终填充容器的100％宽度和100％高度，无论比例如何，那么您应该使用overflow:hidden，并使用顶部，右侧，底部，左侧的位置进行游戏属性，如果你想让它居中。

.container .video{
    min-width:100%;
    min-height:100%;
    overflow:hidden;
}

Answer 3

这对我来说至少是我对桌面的需求：

.container{
    width: auto;
    height: 100%;
    position: absolute;

  bottom: 0px;
  top: 0px;
  background-color: yellow;
  z-index: -1000;
  overflow: hidden;
  box-shadow:  0px 10px 24px 0px rgba(50, 50, 75, 0.49);

  margin: auto;

  font-size: 0;
}


.container video{

    min-width: 100%;
    min-height: 100%;
   position: static;
    top: 0;
    left:0;
   height: 100%;
   width: 100%;
   object-fit: fill;

  }

对于移动设备我会给它一个不同的规则，现在导致视频更改宽高比（我想要的）。