Blank space above Youtube Videos and Masonry Grid

[Rick]

Hey Guys,

You’ve been super helpful so far. I’m still noticing some things with the Mobile view on my website. The link I provided, it contains three YouTube videos. It looks great on desktop, yet on mobile it has a big empty space above each video.

The same happens when I enable the Masonry view on the homepage.

Both issues are also solved by disabling my caching plugin’WP Rocket’. I saw some threads that were unresolved about this. Any news on this?

BR,
Rick

[David]

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.

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

[Rick]

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?

[David]

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%;
}

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

[Rick]

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

[David]

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

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

[Rick]

Thanks David!

[David]

You’re welcome

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

[Author]

Posts