Floating Spotify Playlist

Tags: music, music player, background music, spotify, song

Description:

floating spotify player for your profile - you can replace the playlist with any other iframe e.g. soundcloud or youtube embed!

it doesn’t display on mobile bc it would take up too much room on the screen and u can’t see ur name, pfp or spacehey logo

to get the embed code, click the 3 dots at the top of the playlist/album/song and go to share>embed and copy the code. the code should look something like

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

you can change the size and location of the player, how to do so is labelled in the code!

hope this makes sense <3

(ignore that the player overlaps the main profile in my screenshot, this won’t happen in desktop it’s just bc i took the screenshot on my iPad!)

Preview:

Code:

<!-- (c) Layout created by woodlouse ✰°.ೃ࿔*:･ (https://layouts.spacehey.com/layout?id=39037) --> <div class="spotify"> /*PASTE EMBED CODE HERE*/ </div> <style> @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } } .spotify iframe{ position: fixed !important; top: 0px; /*if you want to move it, change the 0 - the higher the number, the further down the page it goes*/ left: 0px; /*same as the line above if you want to move it, the higher the number the further to the right it goes*/ /*to change the size*/ max-height: 200px; width: 300px; animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } /*this makes it disappear on mobile*/ @media (max-width: 600px) { .spotify{display:none;} } </style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.