Responsive Embeds

 
 
 
 

An opt-in wrapper that makes oEmbed output keep its aspect ratio at any width. When a child theme declares the support, method_responsive_embed_wrap() (lib/theme-setup.php) filters every embed whose <iframe> declares a width and height, wraps it in .method-embed and sets --embed-ratio from those two numbers; the companion styles in global.scss give the wrapper aspect-ratio: var(--embed-ratio, 16 / 9) and stretch the iframe to fill it.


How it works

  • method_maybe_enable_embed_wrap() runs on after_setup_theme at priority 11 — after a child theme’s own after_setup_theme callback at the default priority — and only if current_theme_supports( 'method-responsive-embeds' ). It then attaches method_responsive_embed_wrap() to embed_oembed_html and oembed_result at priority 20.
  • The wrapper returns the HTML untouched when it is not a string, is empty, already contains method-embed, or has no iframe with numeric width and height attributes — so providers that size their iframes with CSS are left alone.
  • The ratio is written as --embed-ratio: W / H, so a 560×315 YouTube embed becomes 16:9 and a 4:3 Vimeo embed stays 4:3; nothing assumes a single ratio.

Enabling it

PHP
// Child theme functions.php
add_action( 'after_setup_theme', function () {
    add_theme_support( 'method-responsive-embeds' );
} );

Output, for a 560×315 embed:

HTML
<div class="method-embed" style="--embed-ratio: 560 / 315">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/…"></iframe>
</div>

Changelog

VersionDescription
2.0.0-beta17Introduced as an opt-in: method_maybe_enable_embed_wrap(), method_responsive_embed_wrap(), the method-responsive-embeds theme support and the .method-embed styles (b4c7dcb).