CSS - 具有最大高度 100% 窗口的流体宽度视频 [重复]答案

【问题标题】：CSS - Fluid width video with max height 100% window [duplicate]CSS - 具有最大高度 100% 窗口的流体宽度视频 [重复]
【发布时间】：2016-05-28 13:48:32
【问题描述】：

我正在寻找一种嵌入响应式视频 (iframe) 的 CSS 方法，以便其高度始终为窗口的 100%，并且宽度适应任何允许的比率。我在这件事上所能找到的只是相反（this technique 的变体）。

所以理想情况下它会像

.videoContainer {
  height: 100%; 
  width: auto;
  max-width: 90%; // Bonus : I need the video not to be 100% width 
  display: inline-block;
  position: relative;
}

.videoContainer::after {
  padding-top: 56.25%; 
  display: block;
  content: '';
}

.videoContainer>iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

我不确定这是否可能。最好不要JS。

【问题讨论】：

this post 可能会有所帮助...最后还有一个 90% 宽度的示例
这太棒了。非常感谢。

标签： css

【解决方案1】：

感谢this post Danield 的完美回答：

iframe {
    width: 90vw; /* 90% of viewport vidth */
    height: 50.625vw; /* ratio = 9/16 * 90 = 50.625 */
    background: pink;
    max-height: 90vh;
    max-width: 160vh; /* 16/9 * 90 = 160 */
    margin: auto;
    position: absolute;
    top:0;bottom:0;
    left:0;right:0;
}

【讨论】：