Skip to content

Consider enforcing iFrame max width of 100% on the front-end for block themes #38586

Open

Description

In the editor, iframes max out at 100% of their parents' width, thanks to this rule:

iframe {
width: 100%;
}

This rule isn't present in the front-end though, which means that iframe can extend beyond their container.

Here's an example using an iframe embed and Twenty Twenty-Two. (Yes, the issue can be avoided using the native YouTube embed block, but this is just an example):

<!-- wp:code -->
<pre class="wp-block-code"><code>
<iframe width="1120" height="630" src="https://www.youtube.com/embed/OpiH_P9aGhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></code></pre>
<!-- /wp:code -->
Editor Front-end
Screen Shot 2022-02-07 at 10 09 44 AM Screen Shot 2022-02-07 at 10 09 52 AM

Originally reported in the Twenty Twenty-Two support forums.
Tested with WordPress 5.9, Twenty Twenty-Two v1.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Block] CodeAffects the Code Block[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions