以下是HTML：
<div class="container">
<div class="wrapper">
<iframe src="...."></iframe>
</div>
</div>
包装器div具有css：position：relative；宽度：100%；身高：100%；高度：0；垫底：56.25%；溢出：隐藏；
iframe具有CSS：
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
容器具有CSS：
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
max-width: 1280px;
max-height: 720px;
我试图在窗口调整大小时保护iframe的16：9的纵横比，并保持它的最大高度为100%-67px calc(100%-67px)。我怎样才能同时做到这两件事呢？
我也有同样的问题。最后为包装器制作了另一个包装器以获得两者的效果。
当padding-bottoms的值从width缩放时，内部包装确保了纵横比的保留。iframe填充它的容器，外包装提供最大宽度，使它在865px之后停止膨胀。
.video-wrapper-wrapper {
max-width: 865px;
margin: auto;
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 82%;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
