背景 Vimeo 视频的行为类似于 background-size: cover - 非全尺寸，但位于较小的容器 div 中

Question

我现在已经浏览了有关此主题的一大堆线程，但我所能找到的只是如何在全屏上解决此问题。那么.. 如何将 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;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

希望您能帮忙！谢谢！

Answer 1

我不确定您是否能够在使用 iframe 时执行此操作。vimeo （以及大多数其他网站）中视频的样式根据容器的大小计算视频的宽度和高度，以故意防止溢出。

如果 iframe 源自单独的域，则跨站点来源的安全性更改可防止篡改 iframe 内的内容（这是必需的） 。

如果您确实想这样做，您可以从您自己的域获取视频并轻松操纵溢出。

就目前情况而言，您只能操作可以iframe包含在包装器中的标签，如下所示，但由于 iframe 中的子类，我在下面不这样做，您将能够创建溢出。

.video-background {
  display: flex;
  height:400px;
  background:#555;
}

.video-background iframe {
  flex: 1;  
}

<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>