Add a music container on your profile

Tags: music, video, embed, container, html

Description:

it's a container with an embedded video if you don't want the video showing in your blurbs section. it also looks kinda cool cause you can place it anywhere, you can even overlap it on other elements to create a messy look. to change the music video you treat it like a regular embed. if you wanna change the media player skin good luck figuring the proportions, but just so you know you can add border radius in the .musicbox iframe{ it looks pretty neat and it might fit other skins this way. anyway p.s. idk if this have been published before, might be

replace with
#dock-container {
position: absolute;
top: 200px; /*adjust*/
right: 50px; /*adjust*/

}
if you don't want the container fixed on the screen when you scroll.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by  (https://layouts.spacehey.com/layout?id=90889) -->

<div id="dock-container">
    <div class="musicbox">
        <iframe width="200" height="100" src="https://www.youtube.com/embed/Bxg_afbit94?si=2J1A2o_ajFllefwh" frameborder="0" allowfullscreen=""></iframe>
        <img src="https://64.media.tumblr.com/5ee043519120c1d0419808a4c5a1c979/tumblr_inline_p90hum7g2n1rcdlva_400.png"/>
    </div>
</div>

<style>
#dock-container {
    position: relative;
}

.musicbox {
    width: 400px; 
    height: 300px; 
    position: fixed;
    top: 200px; /*adjust the position on the page*/
    right: 50px; /*adjust the position on the page*/
}

.musicbox iframe {
    position: absolute;
    width: 367px;
    height: 200px; 
    left: 5.8%; 
    top: 8%;
    z-index: 100;
}

.musicbox img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

}
</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.