/* big play overlay (optional) */ .big-play position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 5;

.video-player:-webkit-full-screen video height: 100%; object-fit: contain;

Before diving into code, I spent some time researching existing video players and thinking about the features I wanted to include in my player. I wanted it to be modern, sleek, and easy to use. I sketched out a basic design, which included:

.volume-slider width: 80px; cursor: pointer; background: #2c3e44; height: 4px; border-radius: 4px; -webkit-appearance: none;

volumeBtn.addEventListener('click', () => if (video.volume > 0) video.volume = 0; volumeSlider.value = 0; else video.volume = 1; volumeSlider.value = 1;