Gutenberg Youtube height is too big

Support
#1

Hi,
I use X theme with Renew Stack.
After updating to Wordpress 5.0.3 with Gutenberg Editor I see an issue with embedded youtube videos in the blog editor.
The videos appear to high.
There is a big black gap above and beneath the video.
With the Wordpress 2019 theme it works.
I send you an example link in a secure note.
Thank you,
Hannes

#2

#3

Hi,

Please check the width and height of your iframe code.

Hope this helps

#4

Thank you, but I have not inserted the iframe code manually.
I just used the Gutenberg Youtube block element.
Here I can only insert the URL and the displaying is managed by Gutenberg.
The issue appears not with 2019 theme.

#5

Hi There @salilou

As an alternative solution, you can use the YouTube embed code using Custom HTML block in Gutenberg.

Example Embed Code:

<iframe width="400" height="225" src="https://www.youtube.com/embed/K0O6aB8rTAY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Then it should render correctly on your post/page.

Hope that helps.

#6

Thank you for the Workaround, which works hardly, because it is not responsive.
Why does the WP theme twenty nineteen display the videos automatically and responsively in the correct size and X theme does not?

#7

Hey @salilou,

Would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#8

The credentials are in a secure note.
It is a productive site.
Thank you!

#9

Hi @salilou,

Before I continue, could you create another page where the youtube video is added with youtube block element? Then please allow me to disable the theme activating another for comparison.

The one I’m currently seeing is the aspect ratio from the code and it’s set to 4:3 which is almost square and it has no connection to X theme. I like to verify this using your test pages, and so I could check it too how it was added.

Thanks!

#10

I have build a clone site with WP staging.
There you can do testing like changing the theme.
I send you credentials in a secure note.
Thank you!

#11

Hello @salilou,

I have investigated the issue and was able to resolved the issue.
It turns out that responsive embeds wasn’t supported in the theme. Adding this line in the child theme’s functions.php resolves the issue:

// Load default block styles.
add_theme_support( 'wp-block-styles' );

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

Please check your pages now.

#12

Thank you, this works!
But still the responsive design is not completely OK, the breakpoint from desktop to tablet view is not OK.
Please see attached screenshot.
The columns on tablet view should arrange under each other, but there is a bis gap righthand.

#13

On WP theme twenty nineteen it works.

#14

Hi @salilou,

Please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 768px){
    .wp-block-column:not(:last-child) {
        margin-right: 0;
    }
    .wp-block-column:not(:first-child) {
        margin-left: 0;
    }
}

Hope it helps :slight_smile:

#15

Yes, that works!
Thank you.

#16

You’re most welcome!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.