Open
Description
openedon Feb 7, 2022
In the editor, iframes max out at 100% of their parents' width, thanks to this rule:
gutenberg/packages/edit-post/src/style.scss
Lines 99 to 101 in 21dfe87
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 |
---|---|
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