Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#48482 closed defect (bug) (fixed)

Block library applying width of 100% to iframe

Reported by: jeremeylduvall Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.3
Component: Editor Keywords:
Focuses: Cc:


In 5.3, there's some styling at wp-includes/css/dist/block-library/style.css that sets the width for iframe elements to 100%. You can see it here:


It looks like this may result from this commit to Gutenberg:


Should this be set to max-width? The width: 100% setting can cause issues with existing iframes (ad units, for example).

Change History (6)

#1 @jeremeylduvall
2 years ago

cc @joen for input as I believe you authored the original Gutenberg commit referred to above.

#3 @SergeyBiryukov
2 years ago

  • Component changed from General to Editor

#4 @david.binda
2 years ago

I've been looking into this, and the issue of an extra iframe { width: 100%; } affects iframes which are supposed to have it's width set via HTML width attribute. Eg.:

<iframe width="560" height="315" src="https://videopress.com/embed/bd2G0c0g" frameborder="0" allowfullscreen></iframe>

In my tests, the width="560" gets ignored if there is a iframe { width: 100%; } in the stylesheets - eg.: introduced by the block editor as in the case mentioned in this ticket.

To me it feels like this change might affect installs using various advertisement systems ( eg: Google ads ... ), as well as sharing video content via iframes ( eg: YouTube, WordPress.tv ... ).

#5 @Joen
2 years ago

There's a patch in https://github.com/WordPress/gutenberg/pull/18240 as well, that I've requested a review for. Hopefully it can land soon.

#6 @SergeyBiryukov
2 years ago

  • Milestone changed from Awaiting Review to 5.3
  • Resolution set to fixed
  • Status changed from new to closed

Hi there, welcome to WordPress Trac! Thanks for the ticket.

It looks like a fix for this was merged upstream in https://github.com/WordPress/gutenberg/pull/18287 and made it into core in [46656].

Note: See TracTickets for help on using tickets.