采用高度而不是宽度的响应式 iframe（youtube/vimeo 嵌入）答案

【问题标题】：Responsive iframe (youtube/vimeo embed) that takes a height, rather than a width采用高度而不是宽度的响应式 iframe（youtube/vimeo 嵌入）
【发布时间】：2019-06-14 17:34:17
【问题描述】：

我有一个包含元素，它的高度会随着视口宽度的变化而变化。它将从 vimeo 和 youtube 加载视频内容。

我想做的是创建一个响应式嵌入，它根据高度保持视频的纵横比。

我知道使用 height: 0 和基于百分比的 padding-bottom 的传统方法，允许根据需要设置宽度，但这并不是我所需要的。

我希望能够指定高度，并自动计算元素的宽度。这在 css 中是否可行，还是我需要求助于 js？

【问题讨论】：

您是否尝试过固定高度并将宽度设置为“自动”？也许你的 iframe 会简单地调整？

标签： css iframe embed

【解决方案1】：

你可以试试

.responsive-iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

你可以使用 Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

【讨论】：

【解决方案2】：

你可以用 css 做到这一点。只需将height:100vh 或您想要的任何高度和width:100% 放在您的媒体上，它将占用视口的高度和父元素的宽度。然后你可以使用 background-size 属性让媒体保持它的比例：https://developer.mozilla.org/fr/docs/Web/CSS/background-size

如果您需要更多帮助，请告诉我！

【讨论】：