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!

79 Kudos


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

mystical illusions

mystical illusions's profile picture

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

Report Comment


~MUSiC iS MY DRuG~'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


lauren's profile picture

using !!!!!!!!!

Report Comment


☽bern☾'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


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


v3niamiin6's profile picture

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

shirubā pupa

shirubā pupa's profile picture

i just added an music player! thanks white hat hacker !!

Report Comment

Glad you like it!

by Wubzilla; ; Report


𝕶𝖆𝖟𝖎𝖒𝖎𝖗's profile picture

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