5

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?

Improve this question
0

2 Answers 2

Reset to default
6

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.

Improve this answer
3
  • 1
    Hm, I had thought the same, but you can see above in my code snippet that I have already added that to my functions.php. Unfortunately there doesn't seem to be any effect with or without this line of code.
    – Riley Cook
    Mar 25, 2019 at 20:10
  • is this a custom theme or a purchased theme? is it 5.0 compatible? There's probably more work the theme authors need to do for it to be able to use Gutenberg's responsive styles and alignments properly.
    – rudtek
    Mar 25, 2019 at 23:00
  • This is a custom theme that I am developing, so I am the theme author. I'm just trying to figure out exactly what work needs to be done to make Gutenberg's responsive styles to work on a custom theme. Recently I've been reviewing the twentynineteen theme's code on github to see how it styles block content, but I haven't been able to find what my theme is doing wrong yet.
    – Riley Cook
    Mar 29, 2019 at 15:53
3

If you don't already have it, add body_class(); to the themes body tag

<body <?php body_class(); ?>>
Improve this answer
1
  • I had the same issue and I can confirm that simply adding the body classes solved my issue. Thanks Reberg.
    – djnetherton
    Jun 25, 2020 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.