Add support for responsive built-in Gutenberg embed blocks in WordPress

October 28, 2020

Don’t ask my why, but per default the embed blocks (like youtube and vimeo) in wordpress are not responsive.

I’ve mostly resorted to just overriding the core blocks (core-embed/youtube, core-embed/vimeo, etc.) rendering functions and added my own responsive wrapping classes. Which is a fair amount of work for quite literally, something you’d expect to be built-in.

Turns out there’s an easier way, all you need to do is enable a flag that your theme supports responsive embeds.

The embed blocks automatically apply styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame.

To make the content resize and keep its aspect ratio, the element needs the wp-embed-responsive class. This is not set by default, and requires the theme to opt in to the responsive-embeds feature.

By adding the following snippet to your main class or functions.php (or whatever other system you use).

add_theme_support( 'responsive-embeds' );

All of the builtin embeds will become responsive.

Tags