Aleš Sýkora / November 28, 2023 / 5 comments

WP Rocket lazy load iframes fix for Oxygen builder

Post summary: If you use the WP Rocket cache and it’s lazyloading for iframes/videos, you can encounter strange padding bottom on Oxygen Builder Video element. To fix it, you need to set padding-bottom unset according to WP Rocket support. Setting up the WP Rocket is easy: To fix the issue, add this CSS to your custom CSS…

If you use the WP Rocket cache and it’s lazyloading for iframes/videos, you can encounter strange padding bottom on Oxygen Builder Video element. To fix it, you need to set padding-bottom unset according to WP Rocket support.

Unexpected padding at bottom of video element in Oxygen builder after activating WP Rocket video lazyload

Setting up the WP Rocket is easy:

WP Rocket Lazyload Iframes and videos settings

To fix the issue, add this CSS to your custom CSS Stylesheet:

.ct-video > .oxygen-vsb-responsive-video-wrapper {
padding-bottom:unset!important;
}

/*OPTIONAL FIX FOR GUTENBERG Embedded content (added 15.06.2022)*/
.wp-block-embed__wrapper:before {
	padding-top:unset!important;
}

You may encounter empty div after setting this up in backend:

But it works perfectly on the frontend:

Finally, it works for visitors!

Oxygen 4.0 + WordPress 6.0

Since WordPress 6.0, it looks like Gutenberg is adding some aspect ratio to the embeds too. I found that it’s been added with padding-top. So when you use embedded video in Gutenberg and display it within Oxygen builder template, you may encounter this:

White gap before video embedded from Gutenberg editor

This is caused by this code: 

.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 75%;
}

I suggest to use this custom CSS to FIX the issue:

.wp-block-embed__wrapper:before {
	padding-top:unset!important;
}

Hopefully it is enough :). Enjoy!

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

5 comments

  • IGRE
    1 year ago Reply

    I have problem with LazyLoad + display:grid .. Not working good image inside grid-container

    grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    justify-content: center;
    grid-gap: 20px;
    }

  • Matouš Gregorič
    2 years ago Reply

    Hello, just a update that new versions – not sure which Oxygen 4.1 or WordPress 6.1 fixed this issue and the fix actually breaks the video showing.

    Regards

  • Greg
    2 years ago Reply

    It’s work like a charm! Thanks

  • Matěj Vitouch
    7 months ago Reply

    Thanks!

  • A
    Aleš Sýkora
    2 years ago Reply

    Hello, for me it’s still needed. It breaks displaying the video when admin is logged in and not cached. I am using this CSS conditionals for it:

    body:not(.logged-in, .wp-admin, .editor-styles-wrapper) .wp-block-embed__wrapper:before {
    padding-top:unset!important;
    }

    body:not(.logged-in, .wp-admin, .editor-styles-wrapper) .ct-section-inner-wrap {
    height: inherit!important;
    }
    body:not(.logged-in, .wp-admin, .editor-styles-wrapper) .ct-video > .oxygen-vsb-responsive-video-wrapper {
    padding-bottom:unset!important;
    }
    body:not(.logged-in, .wp-admin, .editor-styles-wrapper) .embed-container {
    padding-bottom:unset;
    }

Share Your Thoughts