[FREE CSS] Subtle YouTube autoplay in the corner of your screen

<div class="music"><marquee>CURRENTLY PLAYING: Put your song's name here</marquee><iframe width="100%" height="80%" src="https://www.youtube.com/embed/[URL]?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe></div>

<style>

.music {display:block;position:fixed;width:20%;height:10%;background-color: white; left:10px;bottom:10px;border: solid 2px black;color: white;background-color:black;}

</style>

SET UP GUIDE:

0. Copy the code into your profile/theme box/wherever you store your CSS.

1. Pick a YouTube upload to autoplay. You will then copy this part of the link:

Copy and paste it into the "[URL]" portion of the embed link. I highlighted what I mean in the string you just copied.

2. You should also change the "Put your song's name here" text to the song you're embedding's name.

3. If you would like to change the position from the bottom left corner to another, you can change the "left" and "bottom" attributes to ex. "right" and "top" to change the anchor accordingly.

4. You are also free to customize it without needing to credit! I made it plain black just so that it fits about anywhere. I would've uploaded this to the layout portal but that's been locked so I'm doing the next best thing. (I checked the rules and this is completely fine to do, apparently.)

You should comment other CSS requests and I'll do them!!