Hello! I'm back again with another code!
This one adds a Windows Media Player music player with two dancing buddies one each side of it! They start as a static image, but they dance if you hit the play button at the bottom and stop dancing if you hit pause! Here's a preview:
This code will add Gir and Kirby and the song is Caramelldansen,but I have a tutorial on how to change the song, make it autoplay, change the buddies and their positions here!
Sadly, it's not very mobile friendly, as the buttons get too small!
The Windows Media music player wasn't made by me, the original code is this one by cary! Please go to the original source and comment if you're using this code!
Anyways, here's da code:
<!--code by Inccubus Fangzz (https://blog.spacehey.com/entry?id=1874613)
using a layout from cary (https://layouts.spacehey.com/layout?id=91794)-->
<div class="videobox">
<iframe src="https://www.youtube.com/embed/6-8E4Nirh9s?playlist=6-8E4Nirh9s&loop=1&controls=0"
frameborder="0" allowfullscreen="" loading="lazy">
</iframe>
<img class="windows" src="https://files.catbox.moe/g7b6ig.jpg" loading="lazy"/>
<img class="bubble" src="https://files.catbox.moe/sdmw7c.png">
<a class="linkGif play" href="#playingGif" >▶</a>
<a class="linkGif pause" href="#pausedGif" > ||</a>
<div id="pausedGif" class="workingGif">
<div class="gifcontainer">
<img id="gir" src="https://files.catbox.moe/zi3kte.png" alt="gir" loading="lazy" />
<img id="kirby" src="https://files.catbox.moe/tl8gnc.png" alt="kirby" loading="lazy" />
</div>
</div>
<div id="playingGif" class="workingGif">
<div class="gifcontainer">
<img id="gir" class="startgif" src="https://files.catbox.moe/hvuk3n.gif" alt="gir" loading="lazy"/>
<img id="kirby" class="startgif" src="https://files.catbox.moe/6hue79.gif" alt="kirby" loading="lazy"/>
</div>
</div>
<div class="initialGif">
<img id="gir" src="https://files.catbox.moe/zi3kte.png" alt="gir" loading="lazy" />
<img id="kirby" src="https://files.catbox.moe/tl8gnc.png" alt="kirby" loading="lazy" />
</div>
</div>
<style>
#gir {
height: 35%;
}
#kirby {
right: 7%;
top: 55%;
transform: translateY(-45%);
height: 20%;
}
.linkGif{
z-index: 3;
position: absolute;
color: #3354a3 !important;
background-color: #f2f5fc;
border-radius: 50px ;
padding: 2px;
}
.linkGif:hover {
text-decoration: none;
}
.linkGif.play{
left: 27.3%;
top: 83%;
font-size: 0.8vw;
}
.linkGif.pause{
left: 32%;
top: 85%;
font-size: 0.4vw;
}
.workingGif:target ~ .initialGif{
display: none;
}
.workingGif:target .gifcontainer{
display: inline-block;
}
.workingGif:not(:target) .gifcontainer{
display: none;
}
.videobox {
width: 100%;
padding-bottom: 60%;
height: 0;
position: relative;
margin: auto;
}
.windows{
position: absolute;
width: 50%;
margin-top: 3%;
margin-bottom: 2%;
left: 50%;
transform: translateX(-50%);
}
.bubble {
position: absolute;
z-index: 4;
height: 10%;
bottom: 15%;
left: 8%;
pointer-events: none;
}
.videobox img:not(.windows, .bubble){
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.videobox iframe {
position: absolute;
width: 48%;
aspect-ratio: 67.3/52;
top: 19%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
</style>
Simply paste it in the About Me section of your profile!
Little note: If you're changing the width of your profile or of the About Me section, you might need to change the font-size value in linkGif.play and .linkGif.pause ! Other values should work fine, but feel free to change them at your discretion!
Please comment if using - it helps a lot with reach!
If you have any doubts, please lmk in the comments and I'll do my best to help you!
Love you all -
Inccubus Fangzz out!
Report Blog Entry
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
☆Eamon☆
using!