Youtube Html5 Video Player Codepen

This is where we transform a boring video into a modern YouTube clone. We need gradient overlays, smooth transitions, and hidden default controls.

/* Reset & Base */
* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
body 
background: #0f0f0f; /* YouTube dark theme background */
font-family: 'Roboto', system-ui, -apple-system, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

.video-container 
max-width: 1200px;
width: 100%;
background: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);

.video-wrapper 
position: relative;
width: 100%;
background: #000;

/* The Video Element */
.video-element 
width: 100%;
height: auto;
display: block;
cursor: pointer;

/* Custom Controls Container /
.custom-controls 
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
padding: 20px 16px 10px 16px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none; / Allows clicking through to video initially */

/* Show controls when hovering over wrapper */
.video-wrapper:hover .custom-controls 
opacity: 1;
pointer-events: auto;

/* YouTube Style Progress Bar */
.progress-container 
position: relative;
width: 100%;
height: 5px;
background-color: rgba(255,255,255,0.2);
border-radius: 5px;
cursor: pointer;
margin-bottom: 12px;
transition: height 0.2s ease;

.progress-container:hover 
height: 8px;

.progress-buffer 
position: absolute;
height: 100%;
background-color: rgba(255,255,255,0.4);
width: 0%;
border-radius: 5px;
 youtube html5 video player codepen
.progress-filled 
position: absolute;
height: 100%;
background-color: #ff0000; /* YouTube Red */
width: 0%;
border-radius: 5px;
z-index: 2;

.progress-handle 
position: absolute;
height: 12px;
width: 12px;
background-color: #ff0000;
border-radius: 50%;
top: 50%;
transform: translate(-50%, -50%);
left: 0%;
z-index: 3;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;

.progress-container:hover .progress-handle 
opacity: 1;

/* Bottom Controls Row */
.controls-bottom 
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;

.controls-left, .controls-right 
display: flex;
align-items: center;
gap: 16px;

/* Buttons & Icons */
.control-btn 
background: transparent;
border: none;
color: white;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;

.control-btn:hover 
background-color: rgba(255,255,255,0.2);
transform: scale(1.05);

.time-display 
color: white;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;

/* Volume Slider */
.volume-control 
display: flex;
align-items: center;
gap: 8px;
 This is where we transform a boring video
.volume-slider 
width: 80px;
height: 4px;
-webkit-appearance: none;
background: rgba(255,255,255,0.3);
border-radius: 5px;
outline: none;

.volume-slider::-webkit-slider-thumb 
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff0000;
cursor: pointer;

/* Responsive */
@media (max-width: 768px) 
.volume-slider 
width: 50px;
.time-display 
font-size: 12px;

CSS Highlights:

One of the most distinct features of the YouTube player is the red progress bar. We use a wrapper with a background color and an inner div representing the elapsed time.

.progress-container 
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    margin-bottom: 10px;
    transition: height 0.1s ease;
.progress-container:hover 
    height: 6px; /* Enlarges on hover, mimicking YouTube UX */
.progress-filled 
    height: 100%;
    background: #FF0000; /* YouTube Red */
    width: 0%;
    position: relative;
.progress-handle 
    /* Small circle handle at the end of the progress bar */
    width: 12px;
    height: 12px;
    background: #FF0000;
    border-radius: 50%;
    position: absolute;
    right: -6px;
    top: -4px;
    opacity: 0;
    transition: opacity 0.2s;
.progress-container:hover .progress-handle 
    opacity: 1;

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

Below is a concise, practical article you can paste into CodePen (HTML, CSS, JS panels) to build a YouTube-like HTML5 video player with custom controls: play/pause, seek bar with progress and buffer, volume, mute, playback speed, fullscreen, and keyboard shortcuts. The code is accessible-friendly and lightweight.

In the modern web development landscape, the native <video> element in HTML5 has revolutionized how we embed media. However, default browser controls for video players are inconsistent, clunky, and often ugly. Developers frequently look to giants like YouTube for inspiration—seeking that sleek, minimalistic, dark-themed UI with functional progress bars, volume sliders, and time displays. const video = document.getElementById('main-video')

If you have searched for "youtube html5 video player codepen", you are likely looking for three things: the aesthetics of YouTube, the raw power of HTML5 video, and the rapid prototyping environment of CodePen.

In this article, we will not only provide you with a ready-to-copy CodePen blueprint but also break down every line of HTML, CSS, and Vanilla JavaScript required to build a fully functional, YouTube-style video player from scratch.

Professional players show a gray bar behind the red progress bar representing how much of the video has been buffered. This is accessed via video.buffered, a TimeRanges object. Calculating this requires logic to find the buffer range that overlaps with the current currentTime.

They added:

const video = document.getElementById('video');
const playBtn = document.getElementById('playPauseBtn');
const progress = document.getElementById('progressBar');
const timeDisplay = document.getElementById('timeDisplay');
const fullscreenBtn = document.getElementById('fullscreenBtn');
// Play/Pause
playBtn.addEventListener('click', () => 
if (video.paused) 
video.play();
playBtn.textContent = '⏸ Pause';
 else 
video.pause();
playBtn.textContent = '▶ Play';
);
// Update progress bar as video plays
video.addEventListener('timeupdate', () =>  0;
progress.value = percent;
const currentMin = Math.floor(video.currentTime / 60);
const currentSec = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
const totalMin = Math.floor(video.duration / 60);
const totalSec = Math.floor(video.duration % 60).toString().padStart(2, '0');
timeDisplay.textContent = $currentMin:$currentSec / $totalMin:$totalSec;
);
// Seek when progress bar changes
progress.addEventListener('input', () => 
video.currentTime = progress.value * video.duration;
);
// Fullscreen
fullscreenBtn.addEventListener('click', () => 
if (video.requestFullscreen) 
video.requestFullscreen();
);

We begin by caching the DOM elements to avoid repeated queries during animation loops.

const player = document.getElementById('custom-player');
const video = document.getElementById('main-video');
const playBtn = document.getElementById('play-btn');
const progressBar = document.querySelector('.progress-container');
const progressFilled = document.querySelector('.progress-filled');
const volumeSlider = document.querySelector('.volume-slider');
const timeDisplay = document.querySelector('.time-display');