css - 嵌入 Vimeo 播放器（或任何 iframe 视频播放器）全宽和全高

Question

我基本上想让嵌入的 Vimeo 视频占据给定页面（或者它的父 div）的全部宽度和高度。嵌入式 Vimeo 是一个 iframe，我正在使用 react-player 插件嵌入视频。

我看过这些响应式宽度 vimeo 视频的例子：https ://jsfiddle.net/e6w3rtj1/ 。将填充底部或顶部设置为纵横比百分比。但是，这只解决了宽度的问题。我基本上想要object-fit: fill这个 iframe 的图像和视频选项。可能吗？有没有人遇到过解决方案？

Answer 1

我发现这个问题有一个纯 CSS 解决方案，涉及纵横比的媒体查询。

HTML：

<div id="wrapper">
   <iframe/>
</div>

CSS

#wrapper {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   objectFit: fill, 
   transform: translate(-50%, -50%)

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

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