WordPress Gutenberg Embed Blocks Are Not Responsive

by

I’m building a custom theme for a client’s website and want to allow them to use embedded content in their posts (Youtube videos, Facebook posts, Twitter feeds, etc.) Typically, I’ve taken to severely limiting what kinds of blocks are available in the Gutenberg editor so this is the first time I’ve allowed the embed blocks — and now I’m totally lost with how to deal with them.

None of the embedded iframes are responsive to window resizing or on mobile devices. Instead, they overflow off the page and mess up the page layout. I believe this has something to do with inline dimensions being declared. However, I have made sure in each block’s settings that “Resize for smaller devices” is on which states: “This embed will preserve its aspect ratio when the browser is resized.” I have also added the following code to my functions.php: 

function site_features() {
  ...
  ...
  add_theme_support( 'responsive-embeds' );
}
add_action('after_setup_theme', 'site_features');

I have searched multiple forums, blog sites, and elsewhere and have not been able to find anyone having this exact issue. Any solutions I have found are outdated and don’t actually solve the issue I’m having. For example, I’ve found this code to force iframes to respond:

.wp-block-embed {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}

.wp-block-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

But this is not ideal, as I would have to manually update the aspect ratio for each individual block in my css. Can anyone shed some light on this issue?

2 s
2

It may be that your theme hasn’t declared support for responsive embeds. Try adding this code to your functions.php

// Add support for responsive embedded content.
add_theme_support( 'responsive-embeds' );

or your theme setup file if there is one.

Leave a Comment