[wp-trac] [WordPress Trac] #65087: oEmbed dynamic aspect ratio handling in block themes without $content_width

[WordPress Trac]

#65087: oEmbed dynamic aspect ratio handling in block themes without $content_width
--------------------------+-----------------------------
 Reporter:  sanchothefat  |      Owner:  (none)
     Type:  enhancement   |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Embeds        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 oEmbed handling in block themes is good for well known players like
 YouTube with the embed block aspect ratio class handling, but some embeds
 are just coming out at 500px per the default `wp_embed_defaults()`
 settings, especially now that block themes don't necessary set
 `$content_width` - the theme.json content width replaces it many ways but
 it can have a unit other than px.

 I think that block themes should set default embed max widths to the same
 dimension as the large image width, and then if the oembed data response
 contains `width` and `height` values, generate a class name and add
 supporting styles to set the aspect-ratio and auto height, or output
 inline styles on the iframe.

 This will improve the output and behaviour to match user expectations for
 more built in, custom and discoverable embeds.

 One example is using the player.vimeo.com video embed endpoint - used for
 non publicly listed videos, try embedding
 https://player.vimeo.com/video/1138248349 and make the block full width.

 In summary:

 * Setting `$content_width` is no longer viable as a simple pixel value for
 settings embed width and may be missing
 * theme.json can use number + units for the `contentWidth` and `wideWidth`
 so can't reliably set `$content_width` from it
 * The default embed size from `wp_embed_defaults()` is 500px wide without
 `$content_width` set to something else
 * Passing `width` or `maxwidth` to the provider URL via the
 `oembed_fetch_url` filter gets a larger embed within the iframe, but it
 isn't responsive e.g. height remains fixed

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65087>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform