Tuesday, January 25, 2022
The Great Tit
Updated: 15. 6. 2022, Added: 25. 1. 2022

WP Rocket lazy load iframes fix for Oxygen builder

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!

Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 comments on “WP Rocket lazy load iframes fix for Oxygen builder”

  1. 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

    1. 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;
      }

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram