The problem

I recently ran into an annoying issue with Spotify embeds on my music blog. When adding the standard Spotify embed code to my page, the iframe would expand vertically beyond its specified height.

When searching for a solution, I came across this blog post from Stephen Pickering, which mentioned enclosing the code in <div><figure>...</figure></div> and putting ‘px’ inside the <iframe> code. This did not work for me.

After some troubleshooting, I found a simple solution I thought I’d share.

The solution

The solution was quite simple… Add a <div> but give it its own fixed height, like this:

<div style="width:90%; height: 500px; margin: 0 auto; max-width: 500px;">
    <iframe 
      title="Your Title" 
      style="border-radius:12px; width:100%; height:500px; display:block;" 
      src="https://open.spotify.com/embed/playlist/62OmhEKYv2AFjQEAM8Wuxl?utm_source=generator&theme=0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
</div>

I added a max-width to ensure that the iframe does not stretch in devices. I additionally added the following for users who have javascript disabled, right before ‘</iframe>’.

<p>Your browser does not support iframes or Spotify embeds.</p>

One last improvement that can be made is adding styling for smaller devices… This can be done with css like this:

@media (max-width: 768px) {
your css code
}

Hope this helps - and feel free to message me if you have any questions.

Vitali