YouTube Consent Banner creates white space above Video

  • Resolved fhornung

    (@fhornung)


    1 year, 4 months ago

    Theme: Ocean WP
    Tested Browsers: Chrome, Firefox, Edge

    The YouTube consent banner creates a :before class for div class “wp-block-embed__wrapper” with a padding-top value. This happens twice – first it gets the value of 50 %, then it’s overwritten with a value of 56.25 %.

    Before you give consent, this padding-top creates a lot of white space before the video, and places the consent banner not center aligned over the video, but at the top of it. Only after giving consent the white space goes away and everything looks normal.

    I can override that padding-top per custom CSS, so it looks how it should, but when you then give consent – then the whole video disappears, because that same padding-top value is somehow responsible for the height of the video-container.

    Does anybody know a fix or workaround for that issue?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Aert Hulsebos

    (@aahulsebos)

    Hi @fhornung,

    The solutions is some CSS:

    :has(.cmplz-blocked-content-container) .wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    padding-top:unset;
}

    But to make it a bit better in transition, could you send me a screenshot of how the block is positioned in Gutenberg? And if you’re using other OceanWP blocks specifically, or the standard YouTube block?

    regards Aert

    Thread Starter fhornung

    (@fhornung)

    Hi Aert Hulsebos,

    thank you for your quick response, that CSS line seems to do the trick!

    Since this is my first WP website, I am a bit unsure about what is original WordPress, and what was added by themes or plugins. I think what I used is the standard YouTube block (under Embedments). The YouTube block and the paragraph next to it are placed inside a container with flex-direction: row / align-items: center / justify-content: center / flex-wrap: no-wrap. Please let me know if you need anything else.

    Since I am also new to this forum – how can I send you screenshots? When I try to add them to this reply, seems I can only do this by URL.

    About the transition – it seems the first video has a preview-picture with black stripes on top and bottom, which probably can only be changed by the YouTube account that uploaded the video. Before giving consent these stripes are visible, after consent they are being cropped.

    regards Felix

    • This reply was modified 1 year, 4 months ago by fhornung.
    Plugin Contributor jarnovos

    (@jarnovos)

    Hi @fhornung,

    Glad to hear the line of CSS worked for you as well.

    As for the question about the type of YouTube block that you’re using, we’re curious if it is the ‘regular’ YouTube block in the Gutenberg editor (screenshot below), or if this might be an OceanWP-specific block.

    This is what the default YouTube block in Gutenberg looks like.

    If you want to share some screenshots, you can upload these via a service such as https://ibb.co/ or https://snipboard.io/ and share the link in your comment.

    Kind regards, Jarno

    Thread Starter fhornung

    (@fhornung)

    Hi jarnovos,

    here comes the screenshot: https://ibb.co/PjrSDHY

    Please let me know if you need anything else.

    Thank you guys,

    regards Felix

    Plugin Contributor jarnovos

    (@jarnovos)

    Hi @fhornung,

    It does appear to concern a ‘regular’ YouTube block, so it’s likely just the CSS that differs in this case. For now I would recommend using the line of CSS that Aert provided earlier, which seems to work pretty nicely here.

    If you have any other things you would like to adjust and require assistance in doing so, feel free to let us know.

    Kind regards, Jarno

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘YouTube Consent Banner creates white space above Video’ is closed to new replies.