admin管理员组

文章数量:1026381

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?

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?

  • block-editor
  • embed
  • responsive
  • iframe
Share Improve this question edited Mar 23, 2019 at 23:56 Riley Cook asked Mar 23, 2019 at 23:33 Riley CookRiley Cook 511 silver badge3 bronze badges 0
Add a comment  | 

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.

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

<body <?php body_class(); ?>>

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?

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?

  • block-editor
  • embed
  • responsive
  • iframe
Share Improve this question edited Mar 23, 2019 at 23:56 Riley Cook asked Mar 23, 2019 at 23:33 Riley CookRiley Cook 511 silver badge3 bronze badges 0
Add a comment  | 

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.

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

<body <?php body_class(); ?>>

本文标签： Wordpress Gutenberg Embed Blocks Are Not Responsive

版权声明：本文标题：Wordpress Gutenberg Embed Blocks Are Not Responsive 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745641524a2160778.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。