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.
Setting up the WP Rocket is easy:
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:
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:
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!
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
It's work like a charm! Thanks
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
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;
}