假设媒体是Vimeo视频,则宽度设置为100%,但是如果我将高度设置为自动,则高度会太低。
后来,我为视频/媒体设置了500px的高度,但是有一种方法可以将高度设置为宽度的200%。
<iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title=""Super Sleuths"" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
最佳答案
尝试此操作,height: 56.25vw;
将保持16:9
宽高比
.wrapper {
position: relative;
height: 56.25vw;
width: 100%;
margin: 0 auto;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title=""Super Sleuths"" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>