web analytics

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.


Posted

in

, ,

by

Tags:

Comments

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

  1. Doug Avatar

    Thanks for this man!

    1. Stephen Pickering Avatar

      You’re welcome! Thanks for the comment!

  2. Carlos Avatar
    Carlos

    I dont have words to thank you for this post.

    1. Stephen Pickering Avatar

      Oh, that’s so kind of you to write. Thank you! Whenever I can figure out some obscure problem that helps me personally, it usually makes for a great post. Thanks again, and good luck!

  3. Kevin Avatar

    Thanks bro, been looking all over for this shit lmfao, although I didn’t do exactly what you said, you took me to the right direction. This is how I did it:

    I copyed the embed code from spotify, then I went to my wordpress and inserted the CUSTOM HTML and pasted the embed code there. After that I added the px to the height and changed it to 180 like you did and it worked! Thanks!

    1. Stephen Pickering Avatar

      Sorry for the late reply. Thanks for the comment and the additional information! I’ll have to check your way out myself.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.