Gutenberg Block Youtube Embed Default With is 500px?

rossfederated
(@rossfederated)

1 year, 6 months ago
Hello everyone,

I recently developed a site for a client, and I am struggling with the width of the YouTube embed. The i-frame that is generated through the standard guentberg block is 500px, however I would like it to be 1000px, as well as remain responsive.

The theme has these supports declared:
```
add_theme_support( 'title-tag' );
add_theme_support( 'align-wide' );
add_theme_support( 'responsive-embeds' );
```
Any clue how to get these to have that 100% width and remain responsive?

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Moderator t-p
(@t-p)

1 year, 6 months ago

Looking at your site, you use slowtwitch-news theme.

Support of all commercial themes and plugins is out of scope for these forums. While we will not close your post, we also cannot guarantee any support at all, be that by volunteers or the developers. We recommend you instead use the developer’s official contact for their premium offerings, as that is the most direct line. As the developer is aware, commercial products are not supported in these forums.

Thread Starter rossfederated
(@rossfederated)

1 year, 6 months ago

This is not a commercial theme, I created the theme. 🙂

Moderator bcworkz
(@bcworkz)

1 year, 6 months ago

AFAICT the iframe’s width attribute comes from the theme’s content width or size. If undefined it may default to 500px? In any case, I’m not sure the iframe width attribute is significant. What matters is the size of the embed__wrapper and its outer figure element. That is what needs to be responsive and properly sized. That is up to your theme’s CSS. The iframe’s CSS width should be set to 100% of the embed__wrapper’s width, set by the block library’s style.css file.
gasurgaelach
(@gasurgaelach)

1 year, 1 month ago
Hi @rossfederated ,

Please ignore the responses previous, this is indeed Gutenberg behaviour – it affects every theme except those from Automattic, whether commercial or not, including free themes listed on .org. CSS or content area (defined by CSS/JS) plays no part in this.

Add this to your child theme’s function file (I know you already have, but ensure it is a child theme):

// Full-width responsive video support
add_theme_support( 'responsive-embeds' );

You would have full width, responsive embeds immediately. If not, I will reply with detailed code on hook-theme hierarchy.

Hope this helps!
- This reply was modified 1 year, 1 month ago by gasurgaelach.