[Resolved] Blank space above Youtube Videos and Masonry Grid

Home Forums Support Blank space above Youtube Videos and Masonry Grid

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1330861
    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

    #1331139
    David
    Staff
    Customer Support

    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.

    #1331162
    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?

    #1331445
    David
    Staff
    Customer Support

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

    #1332214
    David
    Staff
    Customer Support

    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

    #1332311
    Rick

    Thanks David!

    #1332348
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.