Explore use of responsive iframes for embeds

[westonruter]

Chromium (Chrome and Edge) has implemented support for responsive iframes, allowing an iframe to automatically resize based on its content without the need for any JavaScript on the host page to resize it via postMessage. This is something we should explore supporting in WordPress, both for WordPress post embeds and for other third-party embeds.

See:

• ​https://developer.chrome.com/blog/responsive-iframes
• ​https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/frame-sizing
• ​https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing

[iamchitti]

I was curious how this would fit with the current post embed setup, so I tried it in Chrome 155 with a cross-origin host page, using embed markup generated by ​wp_filter_oembed_result() and the current wp-embed.js.

What I found:

• It works with our sandbox="allow-scripts" iframes, so the opaque origin doesn't seem to be a problem.
• The meta tag needs a content="allow-origins=..." value. A bare <meta name="responsive-embedded-sizing"> did nothing in my tests, same-origin or cross-origin.
• frame-sizing seems to need the iframe's height to be auto. The height attribute we print (​embed.php), a CSS height, and wp-embed.js setting iframe.height (​embed.js) each overrode it. So the host would need height: auto on the iframe.
• min-height/max-height are respected, so the current 200–1000px bounds could move to CSS.
• When the embedded content grew after load, the iframe only followed if the page called window.requestResize(). Without it, it kept its first height. I tested this with a DOM change, not an image load, but the featured image case (​embed-template.js) would presumably need the same.

[iamchitti]

One problem I ran into while testing: mixed versions.

If the host adds frame-sizing: content-height; height: auto but the embedded site doesn't print the meta tag, the iframe falls back to the default 150px and the card gets cut off. That covers every site on current WP, and also other discovered oEmbed providers, since their iframes get .wp-embedded-content too (​embed.php). The host can't tell from CSS alone whether the embedded page opted in.

So it seems like it'd need some JS anyway, e.g. the embed template telling the host over the existing postMessage channel that it supports responsive sizing, and only then switching that iframe to height: auto. postMessage also has to stay for revealing the iframe (​embed.js) and link clicks (​embed.js).