Add a simple music player to your profile! [a tutorial by wubzilla]

this is a tutorial that i wanted back because i used this one a LOT and wanted to put back on spacehey, because i felt like people should use this more.

oh and before anyone asks i do not support any actions he did

without further ado, this was the tutorial i managed to archive:

If you want a simple music player like mine:

just add this to your about me section:

(Put this inside the <style> </style> block from your layout!)

#music {
position: relative;
background: url('https://static.tumblr.com/bpdtqce/eNEnoonrt/musicplayer.png') top left no-repeat;
background-size: auto;
background-size: auto;
background-size: 100% 100%;
overflow: hidden;
height: 50px;
max-width: 305px;
border: 1px solid #000000;
}
#music iframe {
position: absolute;
top: 0px;
height: 47px;
opacity: 0.00000000000000000000000001;
z-index: 0;
left: 0px;
}
#music div {
position: absolute;
top: 10px;
left: 55px;
width: 51%;
margin: 0 !important;
}
#music span {
display: block;
color: #FFFFFF;
font-weight: normal;
text-align: left;
font-size: 12px;
width: 240px;
}

and add this to your "heros" section:

<div style="margin-top: 4px;margin-bottom: -12px;">

<div id="music">
                            <iframe allowfullscreen="" src="https://www.youtube.com/embed/TjPhzgxe3L0//?&autoplay;=1&loop;=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
                        <div>
                            <span class="song">Heaven Knows I'm Miserable Now</span>
                            <span class="artist">The Smiths</span>
</div>
                    </div>

</div>

Change the youtube url after "src=" to the song you want! Don't forget to change the "song name" and "artist name" when you add your own!

2 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

~Ime~

1729829575

thank you, this is helpful

Report Comment

Izzy

1727883084

Omg I've been looking for this code forEVER. Ty ilysm.

Report Comment