Custom Html5 Video Player Codepen -

// 3. Seek Video when clicking on progress bar progressBar.addEventListener('click', (e) => const rect = progressBar.getBoundingClientRect(); const clickX = e.clientX - rect.left; const width = rect.width; const clickPercent = clickX / width; video.currentTime = clickPercent * video.duration; );

<!-- Progress Bar --> <div class="progress-bar"> <div id="progressFill" class="progress-fill"></div> </div> custom html5 video player codepen

function enterFullscreen(element) if (element.requestFullscreen) element.requestFullscreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); const rect = progressBar.getBoundingClientRect()

playPauseBtn.addEventListener('click', togglePlayPause); const clickX = e.clientX - rect.left

);

<!-- Time Display --> <span id="timeDisplay" class="time">00:00 / 00:00</span>