Report Blog Entry
If you want a simple music player like mine:
just add this to your about me section:
#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>
Comments
Displaying 20 of 23 comments ( View all | Add Comment )
marlow シ
aghhh thank you so muchhhh!!! i saw people doing this on their profile and had NO clue how to do it, thanks so much! js need to sort out the scaling of the player image since that's a bit wonky on mine
using c: thanks again!!!!
AD⦻RKABL3 !!!<33
Esta información vale millones.jpg
coolmonkey43
amazinggg!
Moonless🔞(flash warning)
Works perfectly, thanx 4 the tutorial ( ^ w^ )--b
Sinn
Took a while to figure out how to put the embedded YouTube URL but it worked pretty cool 👍 I will be using it :D
mystical illusions
thanks <3 but do I have to do all of this for my blog ?
Kadavera
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.
ame
using !!!!!!!!!
☽arcana☾
using!!! thank you so much for this, it's so cool :o defo gonna end up changing the song super often lol
Glad you like it! I change mine once a week at least!
by Wubzilla; ; Report
김산지
using!! thanx :)
You're welcome!
by Wubzilla; ; Report
quinzzv
i dont understand but i want (ノへ￣、)
Oroworo
Thanks so much for this!!! I really love it, and it was surprisingly easy to set up.
Awesome! glad to hear it!
by Wubzilla; ; Report
Miscellanity
thank you for this i was wondering how people had something like yours 👍🏽
you're welcome! I'm glad it was useful!
by Wubzilla; ; Report
Emilio the dirt gardener
i will (try) to use :) thanks you
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; ; Report
clay <3
It’s not working! I even deleted all of my about me and the code doesn’t work.
The css does need to be inside a block. I updated the post to reflect that. Hope that helps!
by Wubzilla; ; Report
Koltin
joink!
also in my case I just put it in about me section cuz scaling issues.
Cool! Glad it was helpful!
by Wubzilla; ; Report
kj☆
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.
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; ; Report
ok thanks ill try :)
by kj☆; ; Report
nara
using!! tysm for this :)
Glad it was useful!
by Wubzilla; ; Report
Asteroid Point
i'll be using! thanks!
You're welcome!
by Wubzilla; ; Report
galadriel
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!
Glad you like it!
by Wubzilla; ; Report