cr33pyb00m - Autoplay

IMPORTANT ATTENTION!

Important Message:
This code is NOT a functional music player. It is a CSS container designed to imitate the appearance of the MySpace music player and holds an embedded YouTube video (iframe).

PLACEMENT:
Paste this code ONLY in the "General:" section. If you paste it in the Blurbs table, the layout may break.

USAGE GUIDE:
To facilitate installation and explain how to change music, titles, and colors, I am preparing a complete video tutorial on YouTube! It will be available soon. Stay tuned!

ALTERNATIVE LOGOS:

https://i.postimg.cc/T1scLbgx/Logo-MSM.png

Spacehey Music player - (Autoplay)

Code :

Copy and paste to About me

<style>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');

:root {
  --Alternative_Logo: url("https://i.postimg.cc/bw9yTgfh/Logo-SHM.png"); /*personalized*/
  --Album_Cover: url("https://i.postimg.cc/8PFN2D84/Album.png"); /*personalized*/
}
.profile .table-section {
  margin-top: 164px;
}
.profile .table-section+.table-section {
  margin-top: 0px;
}
.spacehey_music_player {
    position: absolute;
    width: 304px;
    background: linear-gradient(#f6f6f6 13%, #cfcfcf);
    border: 2px solid #000000;
    margin-top: -182px;
    margin-left: -107px;
    display: flex;
}
.spacehey_music_player a {
    color: #000000;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
}
.spacehey_music_player a:hover {
    color: #000000;
}
.player_content_left {
    width: 93px;
    flex-direction: column;
    margin-left: 5px; 
    display: flex;
}
.spacehey_music_player .logo {
    width: 90px;
    height: 30px; 
    background-image: var(--Alternative_Logo);
    background-repeat: no-repeat; 
    background-position: left center;;
    background-size: 80px;
}
.album_cover {
    width: 90px;
    height: 90px;
    background-color: #000000;
    background-image: var(--Album_Cover);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90px;
    border: 0.5px solid #000000;
    cursor: pointer;
}
.buy_album {
    width: 90px;
    height: 15px;
    color: #000000;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    text-align: left;
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
}
.buy_album:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("https://i.postimg.cc/x1LpbRZC/Boton-5.png"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    margin-right: 5px;
}
.player_content_right {
    position: relative;
    height: 60px;
    flex-direction: column;
    flex-grow: 1;
    background: linear-gradient(#000000 13%, #77767b);
    margin-top: 45px; 
    display: flex;
}
.player_content_right:before {
    content: "";
    height: 20px;
    background-image: url("https://i.postimg.cc/mDgmJGgz/Boton-7.png"); 
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 60px;
    display: block; 
}
.player_content_right:after {
    content: " ";
    position: absolute;
    top: 67px; 
    left: 37px;
    width: 125px; 
    height: 8px;
    background-image: url("https://i.postimg.cc/TPG7jb8c/Player-1.png"); 
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 125px;
    display: block; 
}
.top_bar {
    position: absolute;
    top: -35px;
    right: 5px;
    display: flex;
    align-items: center;
}
.top_bar span {
    height: 15px;
    color: #000000;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    display: flex;
    align-items: center;
}
.top_bar span:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("https://i.postimg.cc/65k13SYg/Boton-6.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    margin-left: 5px;
}
.controls {
    justify-content: left;
    align-items: left;
    margin-top: -35px;
    margin-left: 5px;
    display: flex;
}
.button.prev {
    width: 35px;
    height: 35px;
    background-color: #77767b;
    background-image: url("https://i.postimg.cc/bJmBwwB9/Boton-1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    border: 4px solid #77767b;
    border-radius: 50%;
    cursor: pointer;
    filter: grayscale(100%);
}
.button.play {
    width: 45px;
    height: 45px;
    background-color: #77767b;
    background-image: url("https://i.postimg.cc/pr7cK1x9/Boton-2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px;
    border: 4px solid #77767b;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 2px;
}
.button.play:hover {
    background-image: url("https://i.postimg.cc/6qT12NsJ/Boton-3.png");
}
.button.play iframe {
    position: absolute;
    top: -15px;
    left: 42px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    opacity: 0.0;
}
.button.next {
    width: 35px;
    height: 35px;
    background-color: #77767b;
    background-image: url("https://i.postimg.cc/RV6Dv9Qw/Boton-4.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    border: 4px solid #77767b;
    border-radius: 50%;
    cursor: pointer;
    filter: grayscale(100%);
}
.button.prev:hover,
.button.next:hover {
    filter: grayscale(0%);
}
.track_info {
    width: 200px;
    justify-content: space-between;
    padding: 0 5px;
    display: flex;
}
.track_info {
    margin-top: 5px;
    flex-direction: column;
}
.track_info span {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
}
.time_info {
    position: absolute;
    top: 67px; 
    left: 0px;
    width: 200px;
    justify-content: space-between;
    padding: 0 5px;
    display: flex;
}
.time_info span {
    color: #000000;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
}
.current_time {
    float: left;
}
.total_time {
    float: right;
}
.add_to_profile {
    position: absolute;
    top: 81px;
    left: 105px;
    width: 90px;
    height: 10px;
    color: #000000;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    text-align: right;
}

/*mobile version settings*/

@media (max-width: 600px) {

.spacehey_music_player {
    width: 391.70px;
    margin-left: -135.40px;
  }
  .track_info {
    width: 250px;
  }
  .player_content_right:after {
    width: 215px; 
    background-image: url("https://i.postimg.cc/zfjdxf8Y/Player-2.png"); 
    background-repeat: repeat;
    background-position: left center;
    background-size: 215px;
  }
  .time_info {
    width: 295px;
  }
  .add_to_profile {
    left: 195px;
  }
}

</style>

Copy and paste to General

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="logo"></a>
    <div class="album_cover"></div>
    <a href="https://www.amazon.com" class="buy_album">Buy Album</a>
  </div>
  <div class="player_content_right">
    <div class="top_bar">
      <span>Pop Out Player</span>
    </div>
    <div class="controls">
     <a href="https://www.youtube.com/watch?v=hiRacdl02w4" class="button prev"></a>
      <div class="button play">

</div>
      <a href="https://www.youtube.com/watch?v=hiRacdl02w4" class="button next"></a>
    </div>
    <div class="track_info">
      <span class="song">[SONG]</span>
      <span class="artist">[ARTIST]</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">00:00</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>