Add a simple music player to your profile!

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!

79 Kudos

Comments

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

mystical illusions	1701110806 thanks <3 but do I have to do all of this for my blog ? Report Comment
~MUSiC iS MY DRuG~	1699989776 for some reason when i added it, the height was stretched and the text was squashed downwards, also covering my original "heroes" text. after playing around, i realized the problem lays in what goes in the "heroes" section, especially the placement of the div tags. i also had gotten rid of the unnecessary gaps in the code cuz a lot of the time, Spacehey doesnt respond well to them for whatever reason. i dont know html the proper way, so i cant pin point the exact issue. Report Comment
lauren	1698666711 using !!!!!!!!! Report Comment
☽bern☾	1698021041 using!!! thank you so much for this, it's so cool :o defo gonna end up changing the song super often lol Report Comment Glad you like it! I change mine once a week at least! by Wubzilla; 1698054827; Report
김산지	1697939376 using!! thanx :) Report Comment You're welcome! by Wubzilla; 1697958091; Report
quinzzv	1697932204 i dont understand but i want (ノへ￣、) Report Comment
Oroworo	1696806061 Thanks so much for this!!! I really love it, and it was surprisingly easy to set up. Report Comment Awesome! glad to hear it! by Wubzilla; 1696834708; Report
Miscellanity	1696738082 thank you for this i was wondering how people had something like yours 👍🏽 Report Comment you're welcome! I'm glad it was useful! by Wubzilla; 1696742378; Report
Emilio the dirt gardener	1696612528 i will (try) to use :) thanks you Report Comment ach... come on, it didn't work, i dont know what "" block means and i don't know where to put it, it just comes out as a video, how can i resolve this????!!! please and thank you :) by Emilio the dirt gardener; 1696613209; Report
clay <3	1696530386 It’s not working! I even deleted all of my about me and the code doesn’t work. Report Comment The css does need to be inside a block. I updated the post to reflect that. Hope that helps! by Wubzilla; 1696549938; Report
Koltin	1696403344 joink! also in my case I just put it in about me section cuz scaling issues. Report Comment Cool! Glad it was helpful! by Wubzilla; 1696415823; Report
kj☆	1696318692 dunno if it's just me, but when i put the second code into heroes, or before any of my interests... the image covers over the text in that space. not all of it if whatever i wrote in it is bigger than the picture. idk how to get it to be above all my interests altogether cuz idk code lol. other than that the button actually works its just not going where i want it to. Report Comment It sounds like some other CSS from your layout is messing with it, if you try it on a blank profile it should work as expected. You can fiddle with where it goes and maybe fiddle with your existing layout's stuff a bit. by Wubzilla; 1696322799; Report ok thanks ill try :) by kj☆; 1696324217; Report
nara	1696208993 using!! tysm for this :) Report Comment Glad it was useful! by Wubzilla; 1696211865; Report
Cressida	1696129905 i'll be using! thanks! Report Comment You're welcome! by Wubzilla; 1696137600; Report
galadriel	1695774179 thank you, this is awesome! autoplay is so invasive, but i love having a profile song. letting people choose if they want to hear it is the perfect compromise! Report Comment Glad you like it! by Wubzilla; 1695775291; Report
v3niamiin6	1695463490 i failed:( Report Comment Aww, try moving the code around, a lot of times it's just a matter of pasting it in the wrong spot by Wubzilla; 1695483410; Report
shirubā pupa	1695341986 i just added an music player! thanks white hat hacker !! Report Comment Glad you like it! by Wubzilla; 1695342917; Report
𝕶𝖆𝖟𝖎𝖒𝖎𝖗	1695291276 i wasnt stoked on having autoplay on my profile so i really like this! probably gonna put it on my profile later! Report Comment Awesome! Just make sure you remove the autoplay part of the youtube URL and it wont play on it's own! by Wubzilla; 1695342946; Report