如何创建一个包含对象适合封面的视频的 div？答案

【问题标题】：How can I create a div which contains a video that is object-fit cover?如何创建一个包含对象适合封面的视频的 div？
【发布时间】：2023-01-12 00:23:39
【问题描述】：

我发现这个 JSFiddle 几乎正是我想要的 - https://jsfiddle.net/q1rjg9zd/

（无论出于何种原因不在下面工作，但它确实在 jsfiddle 中工作）

* {
  padding: 0;
  margin: 0;
}

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);

    @media (min-aspect-ratio: 16/9) {
      height: 56.25vw
    }

    @media (max-aspect-ratio: 16/9) {
      width: 177.78vh
    }
  }
}

<div class="video-background">
  <iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" controls=0 allowfullscreen></iframe>
</div>

请注意，视频的行为类似于带有 object-fit: cover 的图像。

我遇到的问题是这个 sn-p 使用 vw 和 vh 来使视频适应整个屏幕的宽度和高度。

相反，我希望能够将此视频包含在一个 div 中，我可以将其设置为具有特定的测量值（例如 500px 宽度和 1000px 高度）并且视频将以相同的方式运行。

当我尝试从 vw 和 vh 更改宽度和高度时，效果似乎不再有效。

【问题讨论】：

请将示例与包装它的容器放在一起，这样我就可以看到错误在哪里。

标签： css

【解决方案1】：

很简单，我猜你只需要将 iframe 移出 video-background

因为它是 CSS 而 js fiddle 中的那个是 SCSS

最终代码是这样的

* {
  padding: 0;
  margin: 0;
}

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

 iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);

    @media (min-aspect-ratio: 16/9) {
      height: 56.25vw
    }

    @media (max-aspect-ratio: 16/9) {
      width: 177.78vh
    }
  }

<div class="video-background">
  <iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" controls=0 allowfullscreen></iframe>
</div>

【讨论】：