How to Fix a Spotify Embed That’s Too Tall or Stretches Too Far Down the Page

I just released a new single last week, and when I created a new post about it, which included a Spotify embed of the single, even though the embed only contained two songs it stretched all the way down the page. When I google searched for a solution, I came to this page: Spotify embeds have large blank space at bottom on WordPress.org, but their solution, a bit of CSS code added to your Appearance >> Themes >> Customize >> Additional CSS didn’t work for me. As of this writing I’m using the TwentyTwenty WordPress theme.

At first I thought I found the answer simply by adding px after the height number the Spotify gives you for the code. In their code it’s just the number 180 in parentheses. I added a px at the end of that number, and that seemed to solve it, at least as an individual post, but on the main page of the blog at the domain level (as of this writing it is my most recent post), the problem still persisted.

Somewhere along the line of my search, I found someone had wrapped the <iframe> tag that Spotify gives you in a <figure> tag which I had never heard of, but that didn’t help either. What finally worked (at least it seems so at this moment, is keeping that px addition (to the height not the width) and then wrapping the whole thing in a div tag. Here’s what the final code looks like:

<div><figure><iframe src="https://open.spotify.com/embed/album/5r5zBUsuM7tsJtDC3x0AE9" width="300" height="180px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></figure></div>

You can see I went ahead and left the figure tag in there. I don’t know if that makes any difference or not. But the above code seems to have solved my problem as of this writing at least in WordPress and the particular TwentyTwenty theme I’m using at the moment. Just replace your own Spotify code within this nest and add px at the end of the height value and see if it works for you.