[Support request] Blank space above youtube embed videos

Home Forums Support Blank space above youtube embed videos

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

    #1029146
    David
    Staff
    Customer Support

    Hi there,

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

    #1029444
    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.

    #1029459
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.