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:

click on the image for a larger 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 {
    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*/

    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.spotify iframe {
    /*to change the size*/
    max-height: 200px;
    width: 300px;
}
/*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.

Comments

Displaying 20 of 34 comments ( View all | Add Comment )

1di0tcl0wn	1742565840 Using Report Comment
Koiskii	1741843495 using Report Comment
CrustyLux	1741296637 usingg Report Comment
::˙ . ꒷ lin roberto 🎸 𖦹˙::	1740852788 using!! tysm :3 Report Comment
coco ꒰ა ♡ ໒꒱	1740075203 using! Report Comment
ron	1739282628 using! Report Comment Where did you copy the spotify link? I don't understand where to put it by Gabzz; 1739283422; Report you need to post the embed code where it says "/PASTE EMBED CODE HERE/" !! by woodlouse; 1739289734; Report
vxl~tine	1738183130 using Report Comment
WarDen	1734716829 Kinda using .. cant seem to get it to move from top right corner -3- help Report Comment i cant help you if i dont know what code youve written!! did you just change the numbers where i labelled it??? by woodlouse; 1734718154; Report yes i changed the numbers where you labeled the axis at. Even removed the notes beside just in case. by WarDen; 1734729279; Report Didn't expect you to reply and look so quickly. by WarDen; 1734729706; Report ah ok ive seen what went wrong,, i updated the layout,, try copy-pasting the <style> code now!! those numbers should actually move the iframe now lol. it was just trying to move the iframe inside the div which wsnt gonna do anything so its moving the div instead this time. my bad!! by woodlouse; 1734776854; Report also yeah im kinda always on lmao by woodlouse; 1734776895; Report awesome im about to try now! by WarDen; 1735048138; Report Working now :D you the best by WarDen; 1735048442; Report aw yay im glad it’s working!! by woodlouse; 1735059483; Report
Echo	1733625972 usin!11!!1 :D Report Comment
vxl~tine	1733438727 using Report Comment
THE ORPHAN SOURCE	1727842553 using!! Report Comment
Maxx	1727322518 tyy using Report Comment
v1nc3n7	1723743311 using Report Comment
v1nc3n7	1723743308 using Report Comment
Suitcase/White Lily	1723068421 Using!! Report Comment
Diokaa	1722899259 Using!! Tysm for directions <3!! Report Comment
rubyy	1718222034 I didn understand well Im still trying, but thanks tho :3 Report Comment
montanaxd	1716441470 using! Report Comment
Pink🖤✤🌸✤	1711727493 usinggg Report Comment