Constrain embedded iframes to max-width:100%

[mrfoxtalbot]

What problem does this address?

Iframes work well out of the box in large screens but on mobile, I constantly have to add this CSS rule to constrain iframes so they do not overflow the viewport on mobile:

iframe {
  display:block;
  max-width:100%
}

This is easy for me but I can imagine many users getting confused and frustrated.

What is your proposed solution?

Can we tweak the HTML Block to constrain iframes to the available viewport width?

If we want to avoid a too-opinionated version of the HTML block, we could add a block setting offering this option:

☐ Constrain width to fit screen

[jasmussen]

Can you speak a little more about the problem you're trying to solve? Is this about iframes you add in the custom HTML block, where you'd simply appreciate not having to write out that boilerplate CSS every time? Or is it a problem with other blocks?

Asking also because I loosely recall working on some of the iframing componentry for embeds, where a surprising amount of embeds (maybe Kindle?) were simply not responsive. Meaning if we added such boilerplate directly into the iframe component, those embeds would simply be broken.

[mrfoxtalbot]

Is this about iframes you add in the custom HTML block, where you'd simply appreciate not having to write out that boilerplate CSS every time?

Yes, that's the gist of it. I do not mind adding the CSS code but I imagine non-tech-savvy users will struggle with this.

if we added such boilerplate directly into the iframe component, those (non-reponsive) embeds would simply be broken.

I did anticipate this could be a problem, hence my suggestion to add this as a block option.

[jasmussen]

Thanks for the added clarity. I'd personally be a little reluctant to add this if it only solves a problem that's this specific. Mainly because people might want an iframe that does not have a max-width applied in their custom HTML block, and would then have to debug and find the source of this, because it would not come with that from the browser styles.

[mrfoxtalbot]

I share the same view. this is why I suggested adding this as an option that would not be active by default.

In other words, the HTML block would include this unchecked ☐ Constrain width to fit screen option to help users force-fit their iframes if they notice that they are overflowing. Marking the checkbox would include this bit of CSS to fit the iframe.

There is a related issue that might help provide more context: HTML blocks will not be contained to the default page width, you can see it here:
https://jetpacktester.mystagingwebsite.com/2024/03/19/iframe-issues/

Currently, users can work around this second issue by adding the HTML block to a group but this is not easy to guess either.

The underlying problem that connects both issues is that in my view, the HTML Block works in a way that is not intuitive and we could alleviate this problem by adding an option (or two).

[jasmussen]

Thanks for expanding. The use case isn't clear enough to me still, however, because as soon as the Custom HTML block is involved, any CSS counterpart to that feels to be reasonably, custom CSS, i.e. here in the site editor:

Or just inline in the Custom HTML block to go with it. I.e.

<iframe ... />
<style>
iframe {
  display:block;
  max-width:100%
}
</style>

[Mamaduka]

The HTML block doesn't have a wrapper element, so we can't use a "targeted" selector, and introducing a wrapper will probably break things.

[mrfoxtalbot]

The HTML block doesn't have a wrapper element, so we can't use a "targeted" selector, and introducing a wrapper will probably break things.

Thank you for pointing to this @Mamaduka. Without a wrapper, it is going to be challenging to target that block.

as soon as the Custom HTML block is involved, any CSS counterpart to that feels to be reasonably

That's a fair point. We might just have to accept this as an inevitable gap.

Thanks again for taking and look and please feel free to close this as "wont fix" if you think this is not worth pursuing, @jasmussen.

[jasmussen]

Closing wasn't necessarily my goal, but this issue is findable in search, and we can reopen if need be. So let's try that path and I'll stay subscribed!