[SOLVED] Video Embed Padding Issue

1.5 RC

Video embeds have 62.5% padding-top by default. This shows up as a giant white block above the video embed…

2 Likes

Hi Kevin,

Can you elaborate on what you mean exactly by “video embed”?

Are you referring to the Video element or pasting YouTube embed code in a Code element or something else?

1 Like

The Bricks video element.

Just tested in a (near) fresh install and works fine here:

https://bricks1-5.wpdemo.dev/video-element/

Possible to provide the URL of a reduced test case or steps to reproduce the problem?

1 Like

As discussed privately, the issue is because of enabling “YouTube Preview Thumbnails” setting in Perfmatters.

3 Likes

Interestingly enough, ENABLING Bricks built in lazyload and Perfmatters’ YouTube Preview Thumbnails at the same time works around this issue which is problematic for obvious reasons. Doing this also breaks other things like causing other images not to load at all.

Hey everyone,

I’m one of the co-founders/developers of Perfmatters.

To resolve the issue with the thumbnails, you can add a little custom CSS to your site. Here is an example:

.brxe-video .perfmatters-lazy-youtube {
    margin-top: -56.25%;
}

The reason we can’t just fix it automatically from our side is that it’s inside their video container already. But the code above should work. I’ve also added this to our documentation, so hopefully that will help. How to enable lazy load in WordPress (images, iframes, and videos)

And feel free to reach out to us via our website if you need help with that. We have many Bricks users! :+1:

8 Likes

We’ll add the code @brianleejackson shared above to our code base in Bricks 1.7.1, so you don’t have to manually add it yourself when using Bricks & Perfmatters.

8 Likes