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://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;
}

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

juyi	1738617357 Using if it works out for me! Report Comment
UTTOKO	1738604285 trying this out ermmm hope this works!!! Report Comment
Voxxus Altari	1738580862 using! thank you so much! Report Comment
☆jet star☆	1738567427 usingg Report Comment
dr_worm	1738551945 using!! Report Comment
yasmine	1738534707 using Report Comment
yasmine	1738534707 using Report Comment
Angy	1738533260 usingg - thank you Report Comment
Leona	1738532645 using Report Comment
Chloé	1738527657 USING Report Comment
✭ grimey / asher ✭	1738525054 using!!! this rocks xP Report Comment
S4mmyzin	1738521303 using! Report Comment
zombycare	1738518306 using! Report Comment
Angy	1738514894 using!1! thank uuu <3 Report Comment
Dee Dee	1738514236 using !! Report Comment
lacrymosa	1738513800 using! ^__^ Report Comment
dis4ppearing_girl	1738509199 using!! Report Comment
𐙚vickii	1738501965 usingg ♡ Report Comment
breadstick430	1738482663 using Report Comment
Ac1dB4th	1738478298 Using - surprised it didn't confuse me as much as I thought it would. Report Comment