Removing Gap After YouTube Videos

• 

  electricnigma · Member · Aug 6, 2023 at 2:21 pm

  • Copy link
  • Add topic to favorites

  I’m currently running into a display issue with embedded YouTube videos. Whenever one is embedded, there is a notable gap of 40/50 pixels beneath the video and before other blocks, or any caption. It’s not a huge issue, but it looks sloppy, and after searching for similar issues I could not find a way to fix it.

  Here are two examples, one without a caption, and one with a caption, both with red arrows pointing at the gap:

  https://natalie.tf/wp-content/uploads/2023/08/YouTube-Gap-Example-1.png Source: https://natalie.tf/2023/08/06/rundown-8-06-2023-nothing-like-the-first-time/

  https://natalie.tf/wp-content/uploads/2023/08/YouTube-Gap-Example-2.png Source: https://natalie.tf/2023/07/16/rundown-07-16-2023-falling-down-the-helly-tree/

  I am also running the following additional CSS code to center the YouTube videos:

  iframe.youtube-player {
  max-width: 800px;
  max-height: 450px;
  margin-bottom: 0px;
  margin-left: auto !important;
  margin-right: auto !important;
  }

  The gap was still an issue even without this additional CSS code.

  The blog I need help with is: (visible only to logged in users)

• 

  dragstor · Member · Aug 7, 2023 at 12:12 pm

  • Copy link

  Hi there! 👋🏼

  I’m currently running into a display issue with embedded YouTube videos. Whenever one is embedded, there is a notable gap of 40/50 pixels beneath the video and before other blocks, or any caption. It’s not a huge issue, but it looks sloppy, and after searching for similar issues I could not find a way to fix it.

  […]

  The gap was still an issue even without this additional CSS code.

  Would you mind trying this snippet instead:

  .wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
      padding-top: 50%;
  }

  I hope this helps!

• 

  electricnigma · Member · Aug 7, 2023 at 1:20 pm

  • Copy link

  Holy heck, that worked!

  Thank you, very, VERY much! :D