Video Player — Free HTML CSS JS Custom Controls Snippet

The browser's default video controls are a small grey bar stamped with whatever the OS vendor shipped — Chrome's look different from Safari's, both look different from Firefox's, and none of them match anything you've actually designed. Replace them once with a custom player and you own the entire surface: the font, the colours, the shape of the scrubber thumb, and which controls even appear. This snippet builds a complete replacement from the HTML5 Video API up: a three-layer progress bar with a buffer indicator and click-to-seek, volume slider, mute toggle, playback speed cycling through six presets, fullscreen, a spacebar shortcut that ignores input fields, and controls that fade away while playing and reappear on hover or pause.

Three layers, one click: the progress bar

The scrubber is built from three absolutely-positioned <span> elements stacked inside one container: a dim white track at 20% opacity for the full width, a slightly brighter buffer fill, and an indigo playback fill on top. The seek() function handles a click anywhere on that container — const pct = (e.clientX - rect.left) / rect.width turns a raw pixel position into a 0-to-1 fraction, clamped by Math.max(0, Math.min(1, ...)), then vid.currentTime = pct * vid.duration jumps there immediately. There's no separate "drag" mode — a single click is enough, which keeps the interaction model simple without sacrificing precision.

Reading the buffer without polling

Networks aren't instant: the browser downloads a video in chunks, and a good player tells you how far ahead it has buffered. The progress event fires whenever a new chunk arrives; at that point vid.buffered.end(vid.buffered.length - 1) returns the furthest buffered position in seconds, and dividing by vid.duration converts it to the width percentage for the buffer-fill span. That single read-on-progress pattern is cheaper than a polling loop and exactly as accurate — the browser already knows when data arrives, so there's no reason to ask on a timer.

Controls that appear when you need them, vanish when you don't

The control bar has opacity: 0 and transition: opacity 0.2s by default. Two CSS rules do the rest: .player:hover .controls brings them back whenever a mouse is nearby, and .player.paused .controls keeps them fully visible whenever the video is stopped — because a paused player with invisible controls looks broken. JavaScript only needs to manage the .paused class; the hover state is handled entirely by CSS selectors with no event listeners involved.

Speed cycling as a mod-wrapped index

SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2] lives in an array; speedIdx tracks the current position. Every click does speedIdx = (speedIdx + 1) % SPEEDS.length, picks the next value, sets vid.playbackRate, and updates the button label. The modulo wraps 2× back to 0.5× without any branching. It's the same compact cycling pattern the Music Player Card uses for its shuffle-and-repeat state — one index, one array, one % operator, done.

A spacebar shortcut that minds its manners

The keydown listener is attached to document, so it fires regardless of where focus sits on the page — press space anywhere and the video toggles. The guard e.target.tagName !== 'INPUT' (extended here to also skip TEXTAREA) prevents the shortcut from firing when a user is typing somewhere on the same page and happens to press the space bar. It's the same "global listener with an escape hatch" pattern behind the keyboard shortcuts modal in the Keyboard Shortcuts Modal snippet.

Swapping in your own video

Update the <source src="..."> with your video URL. For self-hosted files, list a .webm source first (smaller, faster in Chrome and Firefox) with an .mp4 fallback — the browser picks the first format it can play. The poster attribute on <video> sets a thumbnail shown before playback starts and while paused at currentTime = 0; for anything with a representative frame, it's the difference between a player that looks ready and a black rectangle.