mini music player !

Tags: music, music player, autoplay

Description:

this is a mini music player thingy thattt you can press to play/pause (anddd that iiiiii technically stole from this tumblr theme thingy :3 https://www.tumblr.com/theme/39863)
but i did change it so it'd work on spacehey layouts better sooo here's the code i used :3

PLEASE READ THROUGH EVERYTHING HERE AND IN THE CODE BEFORE U PUT IT ON PAGE

if you're having trouble getting this player to work, make sure u r ONLY putting the video id (for example, "watch?v=cJ2i9XADVao" the bolded part only), and make sure u remove the brackets ([] <--these) from within the link :3
if you're still having trouble, just put a comment :3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by vomitgirl (https://layouts.spacehey.com/layout?id=36600) -->

-- (delete these parts) put this code in the "heroes" section of your profile --

<tr>
</tr>

<div style="margin-top: 4px;margin-bottom: -12px;">

<div id="music">
                            <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"></iframe>
                        <div>
                            <span class="song">[SONG]</span>
                            <span class="artist">[ARTIST]</span>
</div>
                    </div>

</div>


-- put THIS code where ever your style code is --

<style>

#music {
  position: relative;
  background: url('https://file.garden/ZRYtsnIP2EXOR4Kw/Site%20Files/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;
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

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

𐔌 . ⋮ xander .ᐟ ֹ ₊ ꒱	1775862672 using :P Report Comment
yaihn	1775781044 using, but the player overlaps the text. help??? Report Comment
Yunic 𝄞⨾💿✮˚.⋆	1775678931 👍 Report Comment
ｒｅｂｓ／ｃｈａｒｌ	1775652469 using!! can't seem to get the music to play tho :( Report Comment
Kandi Krazy	1775582319 it used to work but it aint anymore :( when i try to click on te buttons it doesnt let me it shows that i can click it but when my page fully loads it wont let me click on it Report Comment
Kandi Krazy	1775581796 using!!!!!!!!!!!!!!!!!!!11 Report Comment
⋆˚౨ৎ࿔ 𝒀𝒖𝒖𝒎𝒊𝒆𝜗𝜚˚⋆	1775547529 Using this hehe, thank you! Report Comment
.𖥔 ݁˖ ASHER .⋆ ♱	1775535232 Usinggg Report Comment
jEsSe	1775433905 It works BUT it wont let me pause the music? Report Comment
fresasconcrema	1775424902 using Report Comment
LizzieTheShortie	1775364266 using!! tysm this is what i was looking for! Report Comment
ＲUᗷI3Ｚ /ᐠ ˵> ⩊ <˵マ	1775350330 using <3 Report Comment
Lain.is.Lain	1775337844 usinng Report Comment
Ghost	1775330830 Using, but the text isn't centered properly and it covers up the play/pause button. I'm trying to fix it myself, but it might not work for me Report Comment Oh same. Have you found a way to center it? by ٭ PR1SM ͜𓈒 ࣪♬; 1775341801; Report I didn't :[ by Ghost; 1775697544; Report Ah, it's fine by ٭ PR1SM ͜𓈒 ࣪♬; 1775845476; Report
alejandro击	1775325420 usingg Report Comment
Lawrence	1775319498 usinggg i love this!! Report Comment
Derpii Doodle🍬	1775293925 Using! Report Comment
Vulpecula Outpost	1775276104 using!!! Report Comment
k4i	1775263916 using! Report Comment
Celeste	1775255692 USING Report Comment