响应iframe (youtube/vimeo嵌入)，它需要一个高度而不是一个宽度

Question

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

我想要做的是创建一个响应的嵌入，保存视频的纵横比，基于高度。

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

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

Answer 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>

​

Answer 2

你可以用css来完成它。只需在媒体上放置一个height:100vh或任何您想要的高度，以及一个width:100%，它就会接受视图的高度和父元素的宽度。然后，您可以使用背景大小属性，以便媒体保持其比率：https://developer.mozilla.org/fr/docs/Web/CSS/background-size。

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