Why does iframe-resizer not work in this case?

I took a look at this library: iframe-resizer

And tried to use it with this code:

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

* {
  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;
}

<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>

Regarding the logic of this library, I think the height of the video should adjust to the container. But it doesn't work. Why?

from Why does iframe-resizer not work in this case?