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 28 comments ( View all | Add Comment )

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
AbaddonO.o	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	1723068421 Using!! Report Comment
Diokaa	1722899259 Using!! Tysm for directions <3!! Report Comment
-- dennis/ash ⊹	1718222034 I didn understand well Im still trying, but thanks tho :3 Report Comment
montanaxd	1716441470 using! Report Comment
Pink🖤✤🌸✤	1711727493 usinggg Report Comment
SpringTheBat	1705864193 OMG USING THIS IS SO COOL SKSVSAJDDJ Report Comment
✩ nini !	1705738327 thank uuu this is awesome Report Comment
Skylerhoe	1704708392 Using!! (thank you for the instructions btw) i LOVE IT!! Report Comment yw!! im glad u like it!! :D by woodlouse; 1704742866; Report
R4tCorps3	1703245673 Using your actually the best :3 Report Comment
Remedo	1702590742 using Report Comment