css - 如何在响应时防止 Youtube 视频溢出页面？

Question

HTML：

<div id="break" class="tabContent">
   <div class="video-container">
       <iframe src="https://www.youtube.com/embed/mj0XInqZMHY?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; autoplay" allowfullscreen></iframe>
   </div>
</div>

CSS：

.tabContent {
    width: 100vw;
    border-bottom: 1px dotted black;
}
.video-container iframe {
    width: 100vw;
    aspect-ratio: 16/9;
}

我正在尝试制作一个选项卡式部分，但我不知道如何防止视频溢出并强制滚动条。如何使视频完美契合，以使页面不会溢出并具有响应性？

标签： csstabs