Youtube embed showing space and no video

  • Hello,

    I embedded a youtube video using the youtube embed block. The URL of the video is here: https://youtu.be/qe9SaAz2JlE

    It shows up fine in the editor, but on the actual published page it just leaves a big white gap on both Chrome and Edge. I’ve tried to use the embed block instead and just paste the whole embed code, but that also does not appear (no gap, it’s like I never put it there). Again, shows in the editor fine.

    Any guidance is appreciated! I am hoping this is an easy fix and I am just doing something wrong. I do not know how to code.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Anonymous User 14808221

    (@anonymized-14808221)

    There’s a JS error in the console when visiting that page, related exactly the video embedded:
    Error while parsing the 'sandbox' attribute: 'allow-presentation' is an invalid sandbox flag.

    However that error shouldn’t block your video, and indeed, it is due to CSS, not JS.

    Your video is hidden behind the block just below it (the part with “ABOUT MY CRUISE” heading)

    If you remove the position: relative on the second div nested into the span with class embed-youtube, then it works

    This might either be a conflict with some CSS added by the theme, plugin or your own CSS.
    Or god knows even a bug in the WP Embed block. I do not work with blocks so I couldn’t tell, but it is clearly a CSS issue.

    • This reply was modified 2 years, 2 months ago by Anonymous User 14808221.
    Thread Starter loewechan

    (@loewechan)

    Hello,

    I am not very familiar with CSS. Where would I be removing the following parts of the code?

    If you remove the position: relative on the second div nested into the span with class embed-youtube, then it works

    Anonymous User 14808221

    (@anonymized-14808221)

    It’s hardcoded in the style attribute of that Div, not sure why/where this is done.

    As I have mentioned earlier:

    This might either be a conflict with some CSS added by the theme, plugin or your own CSS.
    Or god knows even a bug in the WP Embed block. I do not work with blocks so I couldn’t tell, but it is clearly a CSS issue.

    You could always overwrite this with some CSS, but that does not seem the proper way to resolve this to me. You should find out if this happens on a single embed block on a new page too, without other content, and if so, if it also happens with out other plugins/different theme.

    I personally do not use Blocks exactly because of (amongst many other) this type of issues, which are very tricky to figure out what happens where, since nothing is under my control as a developer, and everything is done with “options” which are not actual code. So a lot can be weird, it its output, rather than when using raw HTML/CSS

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Youtube embed showing space and no video’ is closed to new replies.