cr33pyb00m - Videos

IMPORTANT ATTENTION!

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

PLACEMENT:
Paste this code ONLY in the "About me:" or "Who I'd like to meet:" section. If you paste it in the Interests table, the layout may break.

USAGE GUIDE:
To facilitate installation and explain how to change videos, 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/B6DWF4mt/Logo-MSTV-(1).png

https://i.postimg.cc/13zLHpWx/Logo-MSTV-(2).png

https://i.postimg.cc/Dy0TCdN2/Logo-MS-(1).png

Spacehey TV - Video

Code :

Copy and paste to About me

<style>

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

:root {
  --logo-1: url("https://i.postimg.cc/SKhdRyGy/Spacehey-TV-Logo-1.png");
  --logo-2: url("https://i.postimg.cc/bwbLqGkC/Spacehey-TV-Logo-2.png");
  --logo-3: url("https://i.postimg.cc/6QrJ7H8V/Logo-SH-(1).png");

--botones-antes: linear-gradient(#AAD1FF, #3A92FE, #AAD1FF);
  --botones-despues: linear-gradient(#AAD1FF, #1D4ED8, #AAD1FF);
  
  --borde-color: #C7C9C6; 
  --background-color: #9B9B9B;
  --color-negro: #000000;
  --color-blanco: #FFFFFF;
  
  --color-playlist-impar: #1a1a1a;
  --color-playlist-par: #000000;
  --color-playlist-borde-dashed: #333333;
  --color-playlist-hover: #333333;
  
  --color-texto-principal: var(--color-blanco);
  --color-texto-link: #AAD1FF;
  --color-texto-secundario: #CCCCCC;
  --color-texto-meta: var(--borde-color);

--playlist-fondo-claro: #EBEBEB; 
  --playlist-fondo-oscuro: #CCCCCC; 
}
.spacehey-video {
    width: 450px;
    background: var(--color-negro);
    border: 2px solid var(--color-negro);
    box-sizing: border-box;
    margin: 0 auto; 
}
.spacehey-video a {
    color: var(--color-texto-principal);
    text-decoration: none;
}
.video-player-container {
    width: 100%;
    background: var(--color-negro);
    border: 2px solid var(--borde-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.player-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.top-buttons {
    height: 40px;
}
.player-button {
    flex: 1 1 0%; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: var(--botones-antes); 
    border: 2.99px solid var(--borde-color);
    color: var(--color-texto-principal);
    font-family: 'Orbitron', sans-serif; 
    font-size: 10px;
    box-sizing: border-box;
    cursor: pointer;
    margin-left: -3px; 
    text-decoration: none;
}
.player-button:first-child {
    margin-left: 0;
}
.player-button:hover {
    background: var(--botones-despues);
    text-decoration: none; 
}
#video-display-wrapper {
    position: relative;
    width: 100%;
    height: 304.5px;
    overflow: hidden;
}
.video-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}
#video-display-wrapper:not(:target) > #video-1 {
    display: block;
}
.video-item:target {
    display: block;
}
.video-item:target ~ .video-item,
#video-display-wrapper:target > .video-item:not(:target) {
  display: none;
}
.video-display-area {
    width: 100%; 
    height: 226px; 
    background-color: var(--color-negro);
    border-left: 2.99px solid var(--borde-color);
    border-right: 2.99px solid var(--borde-color);
    box-sizing: border-box;
    margin: 0;
    position: relative;
}
.video-display-area iframe, .video-display-area img {
    width: 100%;
    height: 100%;
    display: block;
}
.video-display-area:after {
    display: block;
    content: "";
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 130px; 
    height: 30px;
    background: var(--logo-1) no-repeat center center;
    background-size: contain;
    opacity: 0.7;
    pointer-events: none;
}
.player-bar-simulation {
    width: 100%;
    height: 35px;
    background: var(--borde-color);
    border-left: 2.99px solid var(--borde-color);
    border-right: 2.99px solid var(--borde-color);
    box-sizing: border-box;
    margin: 0;
}
.player-bar-simulation:before {
    display: block;
    content: "";
    height: 35px;
    background: url("https://i.postimg.cc/QMK3GHLd/player.png") no-repeat center center; 
    background-size: 98% auto;
    opacity: 0.7;
}
.bottom-info {
    border-top: 2.99px solid var(--borde-color);
}
.player-logo-button {
    width: 33.3333%; 
    height: 43.50px;
    background: var(--botones-antes);
    border-right: 2.99px solid var(--borde-color);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -3px; 
}
.player-logo-button:before {
    width: 100%;
    height: 100%;
    display: block;
    content: "";
    background: var(--logo-2) no-repeat center center;
    background-size: 130px;
}
.player-logo-button:hover {
    background: var(--botones-despues);
}
.video-info {
    overflow: hidden; 
    flex-grow: 1; 
    height: 43.50px;
    background-color: var(--background-color);
    border-left: 2.99px solid var(--borde-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
    position: relative;
}
.video-title, .video-author {
    color: var(--color-texto-principal);
    font-family: 'Orbitron', sans-serif; 
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    line-height: 1.2;
    width: 100px;
    white-space: nowrap;
    transition: transform 3s linear; 
    transform: translateX(0); 
    will-change: transform;
}
.video-title {
    margin-bottom: 2px;
}
.video-info:hover .video-title, 
.video-info:hover .video-author {
    transform: translateX(-200px); 
}
.video-list-container {
    width: 100%; 
    max-height: 200px; 
    margin-top: 0px; 
    background-color: var(--color-negro);
    border: 2px solid var(--color-negro);
    box-sizing: border-box;
    padding: 5px;
    overflow-y: auto; 
}
.video-list-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 5px;
    border-bottom: 1px dashed var(--color-playlist-borde-dashed); 
    text-decoration: none;
    color: var(--color-texto-principal);
}
.video-list-item:nth-child(odd) {
    background-color: var(--color-playlist-impar); 
}
.video-list-item:nth-child(even) {
    background-color: var(--color-playlist-par); 
}
.video-list-item:last-child {
    border-bottom: none; 
}
.video-list-item:hover,
.video-list-item.active {
    background-color: var(--color-playlist-hover);
    text-decoration: none;
}
.user-icon {
    width: 100px;
    height: 70px;
    min-width: 40px; 
    background: var(--logo-3) no-repeat center center; 
    background-size: 50px;
    margin-right: 15px;
}
.video-details-list {
    flex-grow: 1;
    overflow: hidden; 
}
.video-title-list {
    font-family: 'Orbitron', sans-serif; 
    font-size: 13px;
    font-weight: 900;
    color: var(--color-texto-link); 
    margin-bottom: 2px; 
    width: 100px;
    white-space: nowrap; 
    transition: transform 3s linear; 
    transform: translateX(0); 
    will-change: transform;
}
.video-author-list {
    font-family: 'Orbitron', sans-serif; 
    font-size: 10px;
    color: var(--color-texto-secundario);
    margin-bottom: 5px;
    width: 100px;
    white-space: nowrap; 
    transition: transform 3s linear; 
    transform: translateX(0); 
    will-change: transform;
}
.video-list-item:hover .video-title-list,
.video-list-item:hover .video-author-list {
    transform: translateX(-200px); 
}
.video-meta {
    font-family: Arial, sans-serif; 
    font-size: 10px;
    color: var(--color-texto-meta); 
    display: flex; 
    flex-direction: column; 
}
.video-list-container::-webkit-scrollbar {
    width: 15px; 
}
.video-list-container::-webkit-scrollbar-track {
    background-color: var(--color-blanco); 
    background-image: url("https://i.postimg.cc/sxP2PKZS/Fondo.png"); 
    background-size: 100%;
    background-repeat: repeat;
    background-position: center;
    border-radius: 0px; 
    border: 1px solid var(--color-texto-secundario);
}
.video-list-container::-webkit-scrollbar-thumb {
    background-color: var(--color-blanco); 
    background-image: url("https://i.postimg.cc/7P5btMSL/Desplazamiento.png"); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px; 
    border: 1px solid var(--color-texto-secundario);
}
.video-list-container::-webkit-scrollbar-button:vertical:start {
    background-color: var(--color-blanco); 
    background-image: url("https://i.postimg.cc/rsBBfLxP/Arriba.png"); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px; 
    border: 1px solid var(--color-texto-secundario);
}
.video-list-container::-webkit-scrollbar-button:vertical:end {
    background-color: var(--color-blanco); 
    background-image: url("https://i.postimg.cc/8k7sXBLP/Abajo.png"); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px; 
    border: 1px solid var(--color-texto-secundario);
}

/* MOBILES (Max 600px) */

@media (max-width: 600px) {

.spacehey-video {
   width: 100%;
  }
  .video-list-container {
    width: 100%;
  }
  .player-button {
    font-size: 8px;
  }
  .player-logo-button {
    width: 33.3333%; 
  }
  .player-logo-button:before {
    background-size: 110px;
  }
  #video-display-wrapper {
      border-left: none;
      border-right: none;
  }
  .video-display-area:after {
    width: 110px;
    background-size: contain;
  }
}

</style>

Copy and paste to About me

<div class="spacehey-video">
  <div class="container video-player-container">
    <div class="player-controls top-buttons">
      <a href="#" class="player-button comment-button">COMMENT</a>
      <a href="https://cr33pyb00m.neocities.org/Videos/Videos" class="player-button addtoprofile-button">ADD TO PROFILE</a>
      <a href="#" class="player-button morefromuser-button">MORE FROM USER</a>
    </div>

</div>
        <div class="player-bar-simulation"></div>
        <div class="player-controls bottom-info">
          <a href="https://spacehey.com/home" class="player-logo-button logo-2" title="Spacehey TV - menu"></a>
          <div class="video-info">
            <div class="video-title">[ Video name ]</div>
            <div class="video-author">[ Author's name ]</div>
          </div>
        </div>
      </div>

<div class="video-list-container">
<a href="#video-1" class="video-list-item active">
      <div class="user-icon"></div>
      <div class="video-details-list">
        <div class="video-title-list">[ Video name ]</div>
        <div class="video-author-list">BY: [ Author's name ]</div>
        <div class="video-meta">
          <span class="duration">00:00</span>
          <span class="views">VIEWS: 1M</span>
          <span class="rating">RATING: 95%</span>
        </div>
      </div>
    </a>

<a href="#video-2" class="video-list-item">
      <div class="user-icon"></div>
      <div class="video-details-list">
        <div class="video-title-list">[ Video name ]</div>
        <div class="video-author-list">BY: [ Author's name ]</div>
        <div class="video-meta">
          <span class="duration">00:00</span>
          <span class="views">VIEWS: 1M</span>
          <span class="rating">RATING: 95%</span>
        </div>
      </div>
    </a>

<a href="#video-3" class="video-list-item">
      <div class="user-icon"></div>
      <div class="video-details-list">
        <div class="video-title-list">[ Video name ]</div>
        <div class="video-author-list">BY: [ Author's name ]</div>
        <div class="video-meta">
          <span class="duration">00:00</span>
          <span class="views">VIEWS: 1M</span>
          <span class="rating">RATING: 95%</span>
        </div>
      </div>
    </a>

<a href="#video-4" class="video-list-item">
      <div class="user-icon"></div>
      <div class="video-details-list">
        <div class="video-title-list">[ Video name ]</div>
        <div class="video-author-list">BY: [ Author's name ]</div>
        <div class="video-meta">
          <span class="duration">00:00</span>
          <span class="views">VIEWS: 1M</span>
          <span class="rating">RATING: 95%</span>
        </div>
      </div>
    </a>

<a href="#video-5" class="video-list-item">
      <div class="user-icon"></div>
      <div class="video-details-list">
        <div class="video-title-list">[ Video name ]</div>
        <div class="video-author-list">BY: [ Author's name ]</div>
        <div class="video-meta">
          <span class="duration">00:00</span>
          <span class="views">VIEWS: 1M</span>
          <span class="rating">RATING: 95%</span>
        </div>
      </div>
    </a>
  </div>
  </div>