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 3661 comments ( View all | Add Comment )

°。 ⋆༺♱Vincent♱༻⋆。 °	1794160075 hi, in case anyone is having issues with the music not playing, it might be because the video isnt aligned properly. ive tweaked the code a little to realign the video and i can play and pause the music now. simply replace the section that goes in your style css with this: (add "style" in angle brackets here) #music { position: relative; background: url('https://external-media.spacehey.net/media/sEpY56IKUlhCSqiV8BzxTZU1nju6NO14jZKW0WCD9T4I=/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: -60px; height: 160px; width: 300px; opacity: 0.0000000000000000001; z-index: 0; left: -125px; } #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; } (add "/style" in angle brackets here) i modified the music iframe section just a bit. this fixed it for me. Report Comment
!!SacerficeCentral!!!	1794155431 Usingh Report Comment
!!SacerficeCentral!!!	1794155426 USING Report Comment
!!SacerficeCentral!!!	1794155426 USING Report Comment
!!SacerficeCentral!!!	1794155426 USING Report Comment
!!SacerficeCentral!!!	1794155426 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155424 USING Report Comment
!!SacerficeCentral!!!	1794155417 USING Report Comment
!!SacerficeCentral!!!	1794155417 USING Report Comment
𓋹°⋆ _Nite_𓋹	1794155245 Using, I hoppe Report Comment
【⋆☆⋆ᴇʟᴇᴄᴛʀɪᴄ⋆ᴡᴀʀʀɪ0ʀ⋆☆⋆】	1794017916 Using!! (Hopefully) Thx! Report Comment