[Support request] Large white space above YouTube embed using Gutenberg

[Brian]

Just started using Gutenberg with GP and the YouTube embed block seems to leave a giant block of whitespace above the video.

The HTML doesn’t give me any obvious clues (not a CSS guy and I haven’t modified any CSS defaults):

<figure class=”wp-block-embed-youtube alignwide wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio”>

http://www.youtube.com/watch?v=videolink

</figure>

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

That’s strange, Gutenberg should handle responsive videos by default.

As a test, can you add it to a page that isn’t using Beaver Builder?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Brian]

I created a page using Gutenberg and it seems to work the way it should, but why would a post be handled any different? I don’t have BB enabled for posts.

[Tom]

Strange. The post itself does seem to have some Beaver Builder elements added to it. What’s the URL for the page you created where it’s working? (you can omit the domain name)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

Was this ever resolved? I am having the same issue with my development site.

[Leo]

Any chance you can link us to the page in question?

Feel free to open a new topic so you can use the private URL field as well.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

No it is on my development server but this code I found on another support forum solved the problem:

.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before{
padding-top:0%;
}

[Leo]

Glad you found a temporary solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Mark, any chance you are using Beaver Themer? I went through plugin by plugin and isolated it to Beaver Themer.

Even though I wasn’t using Beaver Builder on posts, I was using Themer for my layout.

I haven’t tracked down specifically yet what aspect within Themer is causing it, but this reminds me to open a ticket with BB either way.

[Brian]

Also, just out of curiosity . . . is there a need to specify 7 different aspect ratios in that code?

Couldn’t you just omit the aspect ratios and set wp-block-embed__wrapper::before{
padding-top:0%;}?

[Leo]

You could try the simplified CSS and see if it works everywhere.

Maybe add !important to it if it’s getting over written by the original CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

I am using Beaver Builder but not Themer. I did not write the code and I am not a coder. All I know is it worked but my understanding is that this issue is from a recent update to Gutenberg in WordPress.

[Leo]

Thanks Mark!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts