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

lina ❦	1775849504 using tysmm Report Comment
Xx_Braedon_xX	1774682627 usinggggg Report Comment
Ivan	1774523194 using!!! (≧∇≦)ﾉ Report Comment
shann✶n	1774477291 using, love the code! thank you so much! Report Comment
𝐒𝐈𝐌𝐎𝐍 𝐇𝐄𝐍𝐑𝐈𝐊𝐒𝐒𝐎𝐍	1772977756 Usingg Report Comment
Anto	1767706266 usin Report Comment
stellarPantomime	1765546682 SO SO NEAT!! IM USING THIS Report Comment
˙⋆✮Ⓐⓢⓗ✮⋆˙	1763760017 usingg! >:D Report Comment
Silly guy >:3!!	1763054487 USING THIS IS SO COOL Report Comment
Amaimew	1760866235 using Report Comment
angerune	1760142386 Using! Report Comment
han >_<	1759842100 using! Report Comment
MAKRELA!! :3	1751229793 USING!! Report Comment
Danii ^_^	1750641603 Using Report Comment
aprrckt	1748941226 using! Report Comment
𝒮𝓊𝓂𝓂𝑒𝓇	1748614937 usingg Report Comment
beyza	1747808986 using Report Comment
fl3shgr1p	1742565840 Using Report Comment
Koiskii	1741843495 using Report Comment
CrustyLux	1741296637 usingg Report Comment