为何iframe-resizer在此场景下无法正常工作？

我使用iframe-resizer库尝试实现视频iframe高度自适应容器，代码如下，但实际并未生效：

JavaScript代码 #

iFrameResize({
  log: true
}, '#myIframe')

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 90vh;
  background-color: yellow;
  overflow: hidden;
}

.scrollable-area {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.gallery-items {
  display: flex;
  min-width: 100%;
  height: 100%;
}

.gallery-item {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#myIframe {
  background-color: blue;
  width: auto;
  overflow: hidden;
  height: 90vh;
}

HTML代码 #

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.6/js/iframeResizer.min.js"></script>

<div class="gallery-container">
  <div class="scrollable-area">
    <div class="gallery-items">

      <div class="gallery-item">
        <iframe id="myIframe" frameborder="0" scrolling="no" src="https://player.vimeo.com/video/584985260" allow="fullscreen"></iframe>
      </div>

      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
      </div>

      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
    </div>
  </div>
</div>

按照库的设计逻辑视频高度应自适应容器，但实际未生效，请问原因是什么？

• 跨域限制：iframe加载的是第三方Vimeo视频页面，属于跨域场景。iframe-resizer默认需要在被嵌入的目标页面加载对应的内容脚本，才能实现跨域下的尺寸通信。但我们无法修改Vimeo的页面代码，因此库的自动高度计算逻辑失效。
• 硬编码高度覆盖：CSS中给#myIframe设置了height:90vh的固定高度，这一样式优先级高于iframe-resizer动态设置的内联样式，直接抵消了库的高度调整效果。
• 容器布局冲突：gallery-item采用flex布局，而iframe设置了width:auto，flex容器下的元素尺寸计算逻辑会干扰iframe-resizer对宽度的识别，进而导致高度计算不准确。

1. 移除硬编码高度：删除#myIframe的height:90vh样式，让iframe-resizer能够动态控制高度：

   #myIframe {
     background-color: blue;
     width: auto;
     overflow: hidden;
     /* 移除height:90vh */
   }
   

2. 跨域视频的替代方案：由于无法在第三方页面添加脚本，改用CSS固定比例自适应或第三方视频API获取尺寸：

   • CSS aspect-ratio方案（推荐）：利用CSS的aspect-ratio属性设置视频的宽高比（比如16:9），实现自适应：

     #myIframe {
       background-color: blue;
       width: 100%;
       aspect-ratio: 16/9;
       overflow: hidden;
     }
     

   • 第三方API方案：通过视频平台官方API获取视频原始宽高比，再动态计算iframe的高度。

3. 调整容器布局：给gallery-item指定合适的宽度或flex属性，确保iframe的宽度计算明确：

   .gallery-item {
     flex: 0 0 80%; /* 示例：设置固定宽度占比 */
     height: 100%;
     display: flex;
   }
   

内容的提问来源于stack exchange，提问作者Anna_B