Youtube Html5 | Video Player Codepen

They styled it dark, sleek, and responsive:

.player 
  width: 80%;
  max-width: 800px;
  margin: auto;
  background: black;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
video 
  width: 100%;
  display: block;
.controls 
  background: rgba(0,0,0,0.7);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
button 
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
input[type="range"] 
  flex: 1;
  height: 4px;
  cursor: pointer;

They started with a clean container:

<div class="player">
  <video id="video" src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" poster="https://via.placeholder.com/640x360?text=Preview"></video>
  <div class="controls">
    <button id="playPauseBtn">▶ Play</button>
    <input type="range" id="progressBar" value="0" step="0.01">
    <span id="timeDisplay">0:00 / 0:00</span>
    <button id="fullscreenBtn">⛶</button>
  </div>
</div>

Implementing a custom YouTube HTML5 video player on platforms like CodePen typically involves transitioning from a standard youtube html5 video player codepen