cr33pyb00m - Autoplay

Autoplay Music

In this section, you'll find designs to add Autoplay music to your profile using the "SpaceHey music player."

Heads up! This isn't a real music player, but a design created with HTML and CSS that simply mimics the look of the classic MySpace player.

With this HTML code, you can easily embed your YouTube music for Autoplay. Plus, you have the following options to customize it:

* Add a pause option so the user can stop the music.

* Include cover art or album art for the song you set to play automatically.

* If you want a more "retro" touch, you can add the MySpace Music logo.

Here is the link for the logo (to use in your code):

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

Placement Note

This code must be placed in your profile's 'General' section. Specifically, put it in the Interests table area, right at the top—above any other content you want to display in that general section.

Autoplay - Customizable

Code :

Copy and paste to General

<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"); /*Customizable*/
  --Album_Cover: url("https://i.postimg.cc/8PFN2D84/Album.png"); /*Customizable*/
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">

/*PUT YOUR AUTOMATIC MUSIC CODE HERE*/

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

Music - SMD

Code :

Copy and paste to General

:root {
  --Alternative_Logo: url("https://i.postimg.cc/bw9yTgfh/Logo-SHM.png");
  --Album_Cover: url("https://i.postimg.cc/wBJjN174/SMD.jpg");
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">SMD</span>
      <span class="artist">(Lil Texas Remix) RomancePlanet</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">t02:04</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>

Music - Let You Go

Code :

Copy and paste to General

:root {
  --Alternative_Logo: url("https://i.postimg.cc/bw9yTgfh/Logo-SHM.png");
  --Album_Cover: url("https://i.postimg.cc/C19ysBvf/Let-You-Go.jpg");
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">LET YOU GO</span>
      <span class="artist">RomancePlanet, STAKILLAZ</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">01:38</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>

Music - Dumbass Statuses

Code :

Copy and paste to General

<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");
  --Album_Cover: url("https://i.postimg.cc/yNmzB5QL/Dumbass-Statuses.jpg");
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">Dumbass Statuses</span>
      <span class="artist">S3RL feat Filthy Frank</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">03:55</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>

Music - Freaking Out

Code :

Copy and paste to General

<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");
  --Album_Cover: url("https://i.postimg.cc/zGV0NgBZ/Freaking-Out.jpg");
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">Freaking Out</span>
      <span class="artist">Adema</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">03:35</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>

Music - Unstable

Code :

Copy and paste to General

<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");
  --Album_Cover: url("https://i.postimg.cc/sXYRJ8dN/Unstable.jpg");
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">Unstable</span>
      <span class="artist">Adema</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">03:13</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>

Music - In The End

Code :

Copy and paste to General

<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");
  --Album_Cover: url("https://i.postimg.cc/pLnY7B9x/In-the-End.jpg");
}
.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 #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  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: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  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(#000 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: #000;
  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: #000;
  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: #000;
  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>

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></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">In The End</span>
      <span class="artist">Linkin Park</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">03:39</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>