css - 采用高度而不是宽度的响应式 iframe(youtube/vimeo 嵌入)

Question

我有一个包含元素，其高度将根据视口(viewport)宽度而变化。它将从 vimeo 和 youtube 加载视频内容。

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

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

我希望能够指定高度，并自动计算元素的宽度。这在 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>