我有一个包含元素,其高度将根据视口(viewport)宽度而变化。它将从 vimeo 和 youtube 加载视频内容。
我想做的是创建一个响应式嵌入,它根据高度保持视频的纵横比。
我知道使用 height: 0 和基于百分比的 padding-bottom 的传统方法,允许根据需要设置宽度,但这并不是我所需要的。
我希望能够指定高度,并自动计算元素的宽度。这在 css 中可行还是我需要求助于 js?
最佳答案
你可以试试
.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>
关于css - 采用高度而不是宽度的响应式 iframe(youtube/vimeo 嵌入),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54288088/