<!--- WMP11XP by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
note: paste this at the end of any other code u have so nothing messes up lol
--->
<div class="m-3" style="filter:drop-shadow(1px 1px 2px black); position:fixed; z-index:100; bottom:0px; right:0px; font-size:11px; color:white">
<!--- favicon + title --->
<a class="card btn p-1 text-reset rounded-0" data-toggle="collapse" href="#collapse" style="border-top-left-radius:5px; border-top-right-radius:5px; font-size:10px; height:20px; background: linear-gradient(180deg, rgba(0,0,0,1) 40%, rgba(110,111,141,1) 100%);">
<span class="my-auto text-left"> <img src="https://static.wikia.nocookie.net/logopedia/images/c/c9/Icon_wmp.png/" class="pr-1" style="height:14px;">Windows Media Player</span>
</a>
<!--- collapse start--->
<div class="collapse" id="collapse">
<!--- info bar --->
<div class="card p-0 rounded-0" style="height:25px; width:200px; background: linear-gradient(180deg, rgba(152,154,195,1) 15%, rgba(0,0,0,1) 50%, rgba(52,74,118,1) 100%);">
<div class="row no-gutters">
<div class="col-5">
<span class="card mt-2 text-center" style="background: linear-gradient(180deg, rgba(76,151,216,1) 15%, rgba(11,15,114,1) 40%, rgba(173,196,242,1) 100%);">Now Playing</span>
</div>
<!--- video title ---->
<div class="col-7">
<span class="card mt-2 px-1 text-truncate border-0" style="background:transparent;">video_title.mp4</span>
</div>
</div>
</div>
<!--- vid --->
<!--- to get this to work, take the string of random letters and numbers after the equal sign in your youtube link and paste it where it says 'URLLINKHERE' --->
<div class="card rounded-0 border-0" style="width:200px; height:150px;">
<iframe width="200" height="150" src="https://www.youtube.com/embed/URLLINKHERE?si=54OOKul4wwihceHp&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!--- controls (static) --->
<div class="card p-0 rounded-0" style="height:25px; width:200px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; background: linear-gradient(180deg, rgba(152,154,195,1) 40%, rgba(0,0,0,1) 91%, rgba(82,98,181,1) 100%);">
<!--- control bar --->
<div class="card m-auto p-1" style="width:170px; height:20px; border-radius:10px; font-size:12px; background: linear-gradient(180deg, rgba(152,154,195,1) 45%, rgba(0,0,0,1) 95%, rgba(52,74,118,1) 100%);">
<div class="row no-gutters p-1" style="margin-top:-3px;">
<!--- shuffle --->
<div class="col justify-content-center">
<i class="fa-solid fa-shuffle" style="text-shadow:0px 1px 3px #000000;"></i>
</div>
<!--- repeat --->
<div class="col justify-content-center">
<i class="fa-solid fa-rotate-right" style="text-shadow:0px 1px 3px #000000;"></i>
</div>
<!--- backward --->
<div class="col justify-content-center pl-1">
<i class="fa-solid fa-backward" style="text-shadow:0px 1px 3px #000000;"></i>
</div>
<!--- play --->
<div class="col justify-content-center">
<div class="card" style="width:19px; height:19px; border-radius:100px; background: linear-gradient(180deg, rgba(197,195,234,1) 6%, rgba(47,73,213,1) 41%, rgba(78,197,248,1) 80%, rgba(201,235,249,1) 96%); margin-top:-5px; box-shadow:0px 1px 3px #000000;">
<i class="fa-solid fa-play" style="margin-left:5px; margin-top:4px;"></i>
</div>
</div>
<!--- forward --->
<div class="col justify-content-center pr-1">
<i class="fa-solid fa-forward" style="text-shadow:0px 1px 3px #000000;"></i>
</div>
<!--- volume --->
<div class="col justify-content-center">
<i class="fa-solid fa-volume" style="text-shadow:0px 1px 3px #000000;"></i>
</div>
<!--- share / credits (do not remove) --->
<div class="col justify-content-center">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird" class="text-reset" style="margin-top:-3px;">
<i class="fa-solid fa-share" style="text-shadow:0px 1px 3px #000000;"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!--- collapse end --->
</div>
