iframe调整窗口的重叠

Question

众所周知，iframe是陈旧的，但我希望有一个响应的。基本上，即使更改窗口大小，视频也必须是可用屏幕高度的100％（由于网站每个网页顶部的横幅，实际上是94.2％）。我只是想知道如何设置宽度，所以它始终是16：9，因为此时视频显示为条带：

<iframe src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
<div id="video-overlay" onclick="hide()">
  <h2>Video</h2>
</div>

<script>
    function hide() {
        document.getElementById("video-overlay").style.display = "none";
    }
</script>

#iframe {
    display: block;
    border: none;
    height: 94.2vh;
}

#video-overlay {
    position: absolute;
    top: 0;
    left: 23.4%;
    width: 53.3%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
}

#video-overlay h2 {
    color: white;
    position: absolute;
    bottom: 2%;
    left: 5%;
}