[Support request] Blank space above youtube embed videos

[Hilton]

Hi,

After installing GP I was having problems to display youtube videos responsiveness on mobile. As some posts were published before Gutemberg editor, some youtube videos were embed only pasting youtube url. And these videos were displaying a blank space before them.

So I added the following to functions.php:

public static function oembed_wrapper( $html, $url, $attr, $post_id ) {
if ( stripos( $html, ‘youtube’ ) !== false) {
return “

{$html}

“;
}
return $html;
}

And I also added this CSS:

.yrv-video-container{
position: relative;
padding-top: 56.25%;
margin-bottom: 1.5em;
}
.yrv-video-container iframe{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.wp-block-embed__wrapper .yrv-video-container{
position: initial;
padding-top: 0;
margin-bottom: 0;
}

It worked until today when I enabled a feature on WP-Rocket cache that substitute youtube iframe for a preview image. And the blank space returned.

Can you help me fix that? Thanks

[David]

Hi there,

what happens if you remove the padding-top: 56.25%; CSS property ?

[Hilton]

Hi David,

If I do that, it hides the video when I am logged in WordPress (WP-Rocket cache disabled). So I will try to contact the cache plugin developer to check if he has a fix for that as it seems to be related to them.

[David]

If it works when logged out then as a quick fix you could try using the logged-in body class to isolate the CSS for example this:

.yrv-video-container{
    padding-top: 56.25%;
}

Would become:

.logged-in .yrv-video-container{
    padding-top: 56.25%;
}

Let us know how you get on with WP Rocket.

[Author]

Posts