Wubzilla's profile picture

Published by

published
updated

Category: Web, HTML, Tech

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!


92 Kudos

Comments

Displaying 20 of 23 comments ( View all | Add Comment )

marlow 🐚

marlow 🐚's profile picture

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!!!!


Report Comment

Serafina.ᐟ ₍ᐢ. .ᐢ₎‧₊˚✩彡

Serafina.ᐟ ₍ᐢ. .ᐢ₎‧₊˚✩彡's profile picture

Esta información vale millones.jpg


Report Comment

coolmonkey43

coolmonkey43's profile picture

amazinggg!


Report Comment

The Thing🔞(flash warning)

The Thing🔞(flash warning)'s profile picture

Works perfectly, thanx 4 the tutorial ( ^ w^ )--b


Report Comment

Sinn

Sinn's profile picture

Took a while to figure out how to put the embedded YouTube URL but it worked pretty cool 👍 I will be using it :D


Report Comment

mystical illusions

mystical illusions's profile picture

thanks <3 but do I have to do all of this for my blog ?


Report Comment

Kadavera

Kadavera 's profile picture

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

ame

ame's profile picture

using !!!!!!!!!


Report Comment

☽arcana☾

☽arcana☾'s profile picture

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; ; Report

김산지

김산지's profile picture

using!! thanx :)


Report Comment



You're welcome!

by Wubzilla; ; Report

quinzzv

quinzzv's profile picture

i dont understand but i want (ノへ ̄、)


Report Comment

Oroworo

Oroworo's profile picture

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; ; Report

Miscellanity

Miscellanity's profile picture

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; ; Report

Emilio the dirt gardener

Emilio the dirt gardener's profile picture

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; ; Report

clay <3

clay <3's profile picture

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; ; Report

Koltin

Koltin's profile picture

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; ; Report

kj☆

kj☆'s profile picture

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; ; Report

ok thanks ill try :)

by kj☆; ; Report

nara

nara's profile picture

using!! tysm for this :)


Report Comment



Glad it was useful!

by Wubzilla; ; Report

Asteroid Point

Asteroid Point's profile picture

i'll be using! thanks!


Report Comment



You're welcome!

by Wubzilla; ; Report

galadriel

galadriel's profile picture

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; ; Report