Making iframe & container responsive without fixing the aspect ratio

Hi. Any help would be greatly appreciated - thanks in advance!

Using forum help I have made an iframe & container responsive using this CSS:

.Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

And then wrapping the iframe inside this div

It adjusts to display the width correctly, changing size with browser window, but it is not altering the box length wise correctly. It either leaves space if little content or adds a scroll bar instead. It seems to be constraining the aspect ratio.

(Container div is set to auto for both height & width but is restrained within a column.)

How can I solve this problem within Webflow so as it is fully responsive in both dimensions?

Here’s an example page. Here the container is too long but if you go ahead and choose a link in the “Book for your surgery” list the next frame ends up with a scroll bar as the content is too long.


Hi @BFast, I would try the iframe styling technique used for responsive video, and see how that works for you:

Could you try that and let us know how it goes? Cheers, Dave :slight_smile:

Nope. Sorry but afraid it has made things worse! Here is the result:

Aside from the change having made it worse that thread’s code is still setting aspect ratios with the 56.25% padding which is entirely what I am trying to prevent.

I found this info:

Do you think it would work?

I wanted to try it and so I went to my dashboard to add head code and had to upgrade my plan which I’m happy to do but didn’t want to do it then and there. When I clicked back to design view I’d lost several hours of work - classes created and assigned yesterday evening had all vanished so I’m afraid to actually try that route again as I’ve had to re-do it all the work lost.

Hi @BFast, I have been doing some checking but I do not have a solution for this, I am sorry about that. As the article you pointed out mentioned, in order to make an iframe container responsive, it is needed to know the aspect ratio and height and width of the item being contained to be able to make that responsive.

We do not support responsive iframe containers for changing content, mainly because we cannot control that content, how it is generated.

One other suggestion is to try to use a fixed aspect ration/height and width, and then use scroll with overflow hidden to generate scroll bars on the embedded content. That may be something else to try if you are interested in trying that.

OK, well I’ve fixed the aspect ratio to match the longest length of data which is when the page is viewed on a mobile phone and then removed the box border which removes the visual clue to the user and makes it less obvious that the space is stretched out. It’s not perfect but until something better comes along I think it’s not too distracting to the design.

Thanks for trying!