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

【问题标题】：Embed Vimeo Player (or any iframe video player) full width and height嵌入 Vimeo 播放器（或任何 iframe 视频播放器）全宽和全高
【发布时间】：2020-09-22 20:20:06
【问题描述】：

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

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

【问题讨论】：

标签： css responsive vimeo react-player

【解决方案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;
   }
}

【讨论】：