html - 纵向模式下的响应式 iframe 视频

Question

我有一个带有垂直视频（9:16）的 iframe，包裹在一个覆盖整个剩余屏幕高度的 div 周围。我正在尝试使 iframe 覆盖包装器的整个高度并仍然保持纵横比。互联网上到处都是水平视频的解决方案，但我似乎无法让它工作......

下面的代码可以工作，但感觉不太稳定。它假设宽度是高度减去固定标题高度的 56.25% (9/16)。同样，它可以工作，但有点跳动，并且在添加边距/填充时会中断。

<header>... header stuff ...</header>
<div class="iframe-wrapper">
   <iframe src="..vertical_video..">
</div>

* {margin:0;padding:0}
header {height: 60px;width: 100%;background-color: red;}
.iframe-wrapper {height: calc(100vh - 60px);width: 100%;display: flex;justify-content: center;background-color: blue;}
iframe {height: 100%;width: calc((100vh - 60px)*9/16);border:none;}

标签： htmlcssiframe