Codepen - Youtube Html5 Video Player

In the early days of the web, video playback was often delegated to proprietary plugins like Adobe Flash or Apple QuickTime. With the standardization of the <video> element in HTML5, developers gained native access to media playback capabilities. However, the default browser implementations of the <video> tag—the "native controls"—vary significantly across Chrome, Firefox, Safari, and Edge. This inconsistency in design and functionality often necessitates the creation of a custom player interface.

The "YouTube-style" player has become a recognizable paradigm. It features a bottom-aligned control bar, a gradient overlay for readability, interactive progress bars with hover previews, and dynamic volume sliders. This paper outlines the methodology for constructing such an interface, similar to the open-source contributions found on platforms like CodePen, where developers share modular, component-based designs.

This is the most critical part. We need to wire up the video element to our custom controls.

// DOM Elements
const video = document.getElementById('youtube-style-player');
const playPauseBtn = document.getElementById('play-pause-btn');
const playIcon = document.querySelector('.play-icon');
const pauseIcon = document.querySelector('.pause-icon');
const progressContainer = document.getElementById('progress-container');
const progressFilled = document.getElementById('progress-filled');
const progressHandle = document.getElementById('progress-handle');
const progressBuffer = document.getElementById('progress-buffer');
const currentTimeSpan = document.getElementById('current-time');
const durationSpan = document.getElementById('duration');
const volumeSlider = document.getElementById('volume-slider');
const volumeBtn = document.getElementById('volume-btn');
const fullscreenBtn = document.getElementById('fullscreen-btn');
// Helper: Format time (seconds -> MM:SS)
function formatTime(seconds) 
if (isNaN(seconds)) return "0:00";
const hrs = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
if (hrs > 0) 
return $hrs:$mins < 10 ? '0' : ''$mins:$secs < 10 ? '0' : ''$secs;
return $mins:$secs < 10 ? '0' : ''$secs;

// Update progress bar as video plays
function updateProgress() 
const percent = (video.currentTime / video.duration) * 100;
progressFilled.style.width = $percent%;
progressHandle.style.left = $percent%;
currentTimeSpan.innerText = formatTime(video.currentTime);
 youtube html5 video player codepen
// Update buffer progress
function updateBuffer() 
if (video.buffered.length > 0) 
const bufferedEnd = video.buffered.end(video.buffered.length - 1);
const percent = (bufferedEnd / video.duration) * 100;
progressBuffer.style.width = $percent%;

// Play / Pause toggle
function togglePlayPause()  video.ended) 
video.play();
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
 else 
video.pause();
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';

// Update volume icon based on level
function updateVolumeIcon() 
const vol = video.volume;
if (vol === 0) 
// Muted icon (simplified)
volumeBtn.innerHTML = <svg viewBox="0 0 24 24" width="24" height="24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" fill="white"/></svg>;
 else 
volumeBtn.innerHTML = <svg viewBox="0 0 24 24" width="24" height="24"><path d="M3 9v6h4l5 5V4L7 9H3z" fill="white"/></svg>;

// Seek video when clicking on progress bar
function scrub(e) 
const rect = progressContainer.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
video.currentTime = percent * video.duration;
 In the early days of the web, video
// Fullscreen functionality
function toggleFullscreen() 
if (!document.fullscreenElement) 
document.documentElement.requestFullscreen();
 else 
document.exitFullscreen();

// --- Event Listeners ---
playPauseBtn.addEventListener('click', togglePlayPause);
video.addEventListener('click', togglePlayPause);
video.addEventListener('timeupdate', updateProgress);
video.addEventListener('progress', updateBuffer);
video.addEventListener('loadedmetadata', () => 
durationSpan.innerText = formatTime(video.duration);
);
progressContainer.addEventListener('click', scrub);
volumeSlider.addEventListener('input', (e) => 
video.volume = e.target.value;
updateVolumeIcon();
);
volumeBtn.addEventListener('click', () => 
video.muted = !video.muted;
updateVolumeIcon();
volumeSlider.value = video.muted ? 0 : video.volume;
);
fullscreenBtn.addEventListener('click', toggleFullscreen);
// Handle video end
video.addEventListener('ended', () => 
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
progressFilled.style.width = '0%';
progressHandle.style.left = '0%';
);
// Keyboard shortcuts (Space = play/pause, F = fullscreen)
window.addEventListener('keydown', (e) => 
if (e.code === 'Space' && document.activeElement !== volumeSlider) 
e.preventDefault();
togglePlayPause();
if (e.code === 'KeyF') 
e.preventDefault();
toggleFullscreen();
);
 // Update progress bar as video plays function

JavaScript Breakdown:

The visual layer is static without JavaScript. We need to manipulate the HTMLMediaElement interface.