-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Constrain embedded iframes to max-width:100% #59926
Comments
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. |
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.
I did anticipate this could be a problem, hence my suggestion to add this as a block option. |
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. |
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 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: 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). |
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.
|
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.
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. |
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! |
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:
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
The text was updated successfully, but these errors were encountered: