Wubzilla's profile picture

Published by


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>
                            <span class="song">Heaven Knows I'm Miserable Now</span>
                            <span class="artist">The Smiths</span>


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


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's profile picture


Report Comment

The Thing🔞(flash warning)

The Thing🔞(flash warning)'s profile picture

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

Report Comment


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 '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's profile picture

using !!!!!!!!!

Report Comment


☽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's profile picture

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

Report Comment


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'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's profile picture

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☆'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'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'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