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

BONEEATERCOM	1778680330 usingg Report Comment
gndhy	1777240359 usandooo Report Comment
ちひろ 💬	1776898493 using but since im a dummy it will take a while for me to find out Report Comment how do I get embed code it didn't work :( by ちひろ 💬; 1776898963; Report
𝔉	1776791429 using ty Report 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