Blank space above Youtube Videos and Masonry Grid

Hi there,

try adding this CSS:

.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    display: none !important;
}

Let me know.

Hi,

I gave it a try, and running that code makes the YouTube videos disappear. Strange.. A friend of mine suggested the following code yesterday, fixing the issue on his end:

.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    padding-top: 0;
}

Yet when I published it, it made the video disappear too. Has this solved it for others?

Its one of those little annoyances where a CSS fix works within the browser but NOT when added directly to the site. Which means something else is at play and that in this case is the JS Lazy Loader.

Anyhow - the issue is because WP Rocket replaces the video embed with its own player code. But it doesn't take into account the WP Video Block wrappers CSS. So it ends up with double the height it requires....

You can try adding the videos using an embed code instead of the Video Block:

https://embedresponsively.com

OR LAST MINUTE IDEA - try this CSS:

.rll-youtube-player {
    margin-top: -56.23%;
}

David,

And what a last minute idea, this CSS fixes the Youtube issue on the pages :)

Do you have a similar solution for the masonry grid? If not, it's not pressing, I can live without. You can then put this post on solved. :) Thanks again

Regards,
Rick

Masonry isn't so simple as its JS calculates the size of each post, whereas the video we were just removing the fixed padding....

You can try WP Rockets trouble shooting to eliminate what setting is breaking the masonry:

https://docs.wp-rocket.me/article/106-my-site-is-broken

Thanks David!

You're welcome