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

Anna if I answered your question, could you make the answer as accepted. If not what else would you like to know. Thanks. — svarlitskiy, Aug 02 '23 at 08:05

score 0 · Answer 1 · answered Aug 03 '23 at 07:37

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.

score -1 · Answer 2 · answered Jul 25 '23 at 06:28

-1

The iframe is doing everything correctly. You have not set a width so it has picked the smallest width available based on the content within. What you probably want to do is to add an aspect-ratio so that the iframe would maintain a square or rectangular shape.

See aspect-ratio | MDN Developer Docs for more information.

#myIframe {
  background-color: blue;
  width: auto;
  overflow: hidden;
  height: 90vh;
  aspect-ratio: 16/9;
}

answered Jul 25 '23 at 06:28

svarlitskiy

618
5
11

Thanks for your answer. But if I calculate the size with aspect-ratio, then I don't see a sense anymore to use iframe-resizer. I thought the advantage of it is that it can calculate everything by itself like an image would do. – Anna_B Jul 25 '23 at 07:12
1

In general, if you can get away with not using a framework or library, then don't use it. You will get more performance benefits from your code just by sticking to html, css, and vanilla javascript. I couldn't find anything in the documentation that stated that an iframe would resize to an aspect ratio but your best bet would be to ask the author of the library on github itself as an issue. – svarlitskiy Jul 26 '23 at 08:11

Why does iframe-resizer not work in this case?

2 Answers2