Vimeo 嵌入不遵守最大高度

Question

我在尝试让响应式 Vimeo 嵌入与我的整体视觉设计配合使用时遇到了一个神秘的问题。我想要实现的是让 Vimeo 嵌入呈现与其下面的图像相同的效果；

HTML:

<div class="vimeo"><iframe src="https://player.vimeo.com/video/180293809?h=9f21a250ca" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

CSS:

.vimeo {
  display: block;
  padding: 1vw;
  position:relative;
  max-width: 95vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

上面渲染了高度为 0 px 的 div。然而，当我对图像做同样的事情时，它工作得很好。我还尝试将相同的 CSS 应用于内部 iframe，但它只是使 iframe 更大，同时将视频播放器渲染为邮票的大小。