Cool YouTube Video Player for Your Profile

How to Use

1. Copy the HTML code


2. Paste it into your profile


3. Replace the YouTube URL with your favorite video

The Code

<!-- (c) created by SynthSpire (https://spacehey.com/synthspire) -->

<!-- Start of Awesome Video Player -->

<style>

.player-container {

  max-width: 600px;

  margin: 20px auto;

  background: linear-gradient(145deg, #1e3c72, #2a5298);

  border-radius: 15px;

  padding: 20px;

  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

  border: 1px solid rgba(255, 255, 255, 0.18);

  position: relative;

  overflow: hidden;

}

.player-container::before {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: linear-gradient(

    45deg,

    transparent 0%,

    rgba(255, 255, 255, 0.1) 50%,

    transparent 100%

  );

  animation: shine 8s infinite linear;

  pointer-events: none;

}

@keyframes shine {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}

.video-container {

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  overflow: hidden;

  border-radius: 10px;

  transition: transform 0.3s ease;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  border: 2px solid rgba(255, 255, 255, 0.1);

}

.video-container:hover {

  transform: scale(1.02);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

}

.video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: none;

}

@keyframes float {

  0% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-20px) rotate(180deg); }

  100% { transform: translateY(0) rotate(360deg); }

}

.particle {

  position: absolute;

  width: 8px;

  height: 8px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  pointer-events: none;

}

.particle:nth-child(1) { top: 20%; left: 10%; animation: float 8s infinite; }

.particle:nth-child(2) { top: 60%; left: 80%; animation: float 10s infinite; }

.particle:nth-child(3) { top: 80%; left: 30%; animation: float 7s infinite; }

</style>

<div class="player-container">

  <div class="particle"></div>

  <div class="particle"></div>

  <div class="particle"></div>

  <div class="video-container">

    <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" 

            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 

            allowfullscreen></iframe>

  </div>

</div>

<!-- End of Awesome Video Player -->