mini music player customizations!!!

the mini music player from vomitgrl is one of the most used codes on spacehey!!! and for good reason of course; it's simple and cute, and a perfect callback to myspace's original.

howeeeeverrrrrrrr, throughout my time using it (which is... almost 2 years?), i've found myself tweaking the code a bit to fit different needs. changing the appearance, using soundcloud instead of youtube... so i've listed those here in this blog post! blah! let's get into ittttt :P

ah, and before we start. the music player is a custom div, with the named elements #music, #music iframe, #music div, and #music span. i might reference these by name at some point so keep them in mind!!! or just have them handy lolz, whatever works for you~

1. soundcloud instead of youtube

as a lot of people know, youtube's being (and has been...) a real jerk right now. if you don't want to use youtube but still love this music player, i've pieced together a way to embed soundcloud instead.

first off, as the music player uses the iframe template for youtube, you can delete <iframe allowfullscreen="" src="https://www.youtube.com/embed/[REPLACE WITH ONLY YOUTUBE VIDEO ID]//?&;amp;;autoplay=1" loading="lazy" width="560" height="315" frameborder="0">. we'll take the iframe template from soundcloud, so this won't be necessary.

next up, you have to find your song of course! my test song of choice is you by kat-tun, ehehe. click on the share icon, and get the embed code that specifies height=300. this is important!!!

now, you'll get a really ugly paragraph. but you really don't need most of it!!! we only need the iframe width, height, and source (src). you should get something like <iframe width="100%" height="300" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/[track id]">. v nice! we can now put that in front of the ending </iframe> tag, and that's our music player.

except!!!!!!! there's one last step. the stated iframe width? change it to 50%. if you don't, you'll just open up the webpage to the song again and again, because that's not where the play button is. at 50% width, the play button aligns with the image. you just have to be careful not to click too low, or else you'll get the privacy policy link instead. but other than that, it works.

2. ipod

this edit is something i'm using right now, because it's so versatile and easy~ it's only a few quick value and attribute changes.

in the style tags, the first element we're changing is #music:

• background: url(https://i.pinimg.com/736x/9d/06/3d/9d063dfc2399b120842df2bf752ce67d.jpg) top left no-repeat;
  
• background-size: 100% 85:
• height: 52.5px;
• max-width: 48.2px;

next up is #music div:

• top: 7px;
• left: 45px;

and finally, my favorite detail-- hue-rotate. however, this isn't mandatory. this is only to change the color of the iPod if you don't want it to be pink.

in #music, add the line filter: hue-rotate();. within the parentheses, you have to add a degree value. for instance, in my masamune layout, i'm using 120deg. the higher the degree value, the more it shifts towards blue. (just think of the em spectrum!) if you want the iPod to be gray, use filter: saturate(0%); instead.

i would like to point out, though, that i'm using it in blurbs rather than in table. i changed the margins as well, accordingly, but nothing about the actual placement of the video in relation to the player frame has been changed. it should work all the same.

09/08/2025 edit: wait!!!!!!! selkie just reminded me of this. using the iPod layout, setting autoplay to true / on causes it to open in another page. in order to stop that, i set autoplay to false / off. if you're having problems with the link, i'd suggest to try that first. if that doesn't work, pls let me know!!!

so uh... yeah! those are the edits i've got so far. if i ever figure out a new cool thing, i'll post it here.

thanks for reading! hope you found something interesting or useful. if u have any questions, don't be afraid to comment below. i'm bad at explaining things, but i'll try my best!

- eugene