嵌入的Vimeo播放器（或任何iframe视频播放器）的完整宽度和高度

Question

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

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

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