Why does iframe-resizer not work in this case?

Question

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/[email protected]/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?

Answer 1

The library you are using tries to resize the iframe so that it is just the right height to display the page loaded in the frame.

To do this, it needs to access the DOM of that page so it can measure the height of the content.

For, hopefully fairly obvious, security reasons JavaScript running in a page on one origin (yoursite.example.com) cannot have direct access to the DOM of a page on a different origin (player.vimeo.com).

The postMessage feature is provided by browsers to allow communication between JS on different origins and iframe-resizer attempts to use it to get the height of the content on player.vimeo.com.

When you run the live demo in your question you should see this warning logged in the console:

[iFrameSizer][Nested host page: myIframe] IFrame has not responded within 5 seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.

See the instructions for the library you are using:

The second file (iframeResizer.contentWindow.min.js) needs placing in the page(s) contained within your iFrame.

You haven't done this.

You also can't do this, because you don't have control over player.vimeo.com and the people who do are unlikely to install the script for you, even if you ask nicely, because they are a huge corporation and you aren't so you won't be able to make it worth their while.