Floating Spotify playlist

Site URL: https://tetra-prism-gblf.squarespace.com/home

Hey everyone, wondering if anyone knows how to embed a Spotify playlist, that then is a floating player (across all sections) in the bottom right hand corner on all pages?

Here is the playlist embeddable code:

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1jPEI1ZyAMuA4aLSsAxm8U?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Password for website: NewSiteLove

Thank youuu in advanced for any help!!

Hi, I will take a stab at this without actually doing it/testing it.

First, add this custom CSS:

.spotify-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 152px;
  width: ~'clamp(100px,200px,80vw)';
  z-index: 100
}

You can adjust the values as you wish. I've tried to make the width flexible and work across device sizes but you may need to tweak it.

Then go to your code injection footer and paste this:

<div class="spotify-container">
  <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1jPEI1ZyAMuA4aLSsAxm8U?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>

Hopefully it just magically works :)

@Square_Ace YOU ARE AMAZING!!! It works exactly howww we needed - so appreciate you!! Anyone that may need this - it now has been tested and works thanks to this man lol

First, add this custom CSS:

.spotify-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 152px;
  width: ~'clamp(100px,200px,80vw)';
  z-index: 100
}

You can adjust the values as you wish. I've tried to make the width flexible and work across device sizes but you may need to tweak it.

Then go to your code injection footer and paste this:

<div class="spotify-container">
  <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1jPEI1ZyAMuA4aLSsAxm8U?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>