小编Jep*_*e R的帖子

我现在已经浏览了有关此主题的一大堆线程，但我所能找到的只是如何在全屏上解决此问题。那么.. 如何将 Vimeo 视频 iframe 嵌入到任意大小（不是完整大小！）的容器中，使其行为类似于 CSS background-size:cover。所以基本上它会溢出 Y 或 X。我还想将视频集中在容器中。

这是我的代码：

<figure class="video-background ">
    <iframe src="https://player.vimeo.com/video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>

我的视频背景 div 的固定高度为 400px，宽度可变

Oliver 的这个答案展示了如何在全屏上执行此操作，但如何在较小的 div 上模仿这种行为？他的解决方案如下所示：

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

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

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  } …