Removing Gap After YouTube Videos
-
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)
-
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!
-
- The topic ‘Removing Gap After YouTube Videos’ is closed to new replies.