webdevpuneet.com

Related Snippets

54 in Media & Galleries category
49–54 of 54

Photo Gallery with Lightbox

Video Player

Image Magnifier

Audio Waveform Visualizer

Before / After Slider

Video Scrub Comparison Slider

Video Player — Free HTML CSS JS Custom Controls Snippet

Video Player · Media · Plain HTML, CSS & JS · Live preview

CategoryMedia & Galleries
TagsKeyboard NavigationSVGMedia PlayerGames

Copy & paste

Source Code

<div class="player-wrap">
  <div class="player" id="player">

    <!-- Video element (replace src with your video URL) -->
    <video
      id="vid"
      class="video"
      preload="auto"
      poster="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=680&q=80"
      onclick="togglePlay()"
    >
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    </video>

    <!-- Big play overlay -->
    <div class="play-overlay" id="play-overlay" onclick="togglePlay()">
      <svg width="56" height="56" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
    </div>

    <!-- Controls -->
    <div class="controls" id="controls">
      <!-- Progress bar -->
      <div class="progress-wrap" id="progress-wrap" onclick="seek(event)">
        <div class="progress-bg"></div>
        <div class="progress-buf" id="progress-buf"></div>
        <div class="progress-fill" id="progress-fill"></div>
        <div class="progress-thumb" id="progress-thumb"></div>
      </div>

      <div class="ctrl-row">
        <!-- Play/pause -->
        <button class="ctrl-btn" id="play-btn" onclick="togglePlay()" aria-label="Play/pause">
          <svg id="play-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        </button>

        <!-- Volume -->
        <div class="vol-wrap">
          <button class="ctrl-btn" id="vol-btn" onclick="toggleMute()" aria-label="Toggle mute">
            <svg id="vol-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
          </button>
          <input type="range" class="vol-range" id="vol-range" min="0" max="1" step="0.05" value="1" oninput="setVol(this.value)">
        </div>

        <!-- Time -->
        <span class="time-display" id="time-display">0:00 / 0:00</span>

        <div class="ctrl-right">
          <!-- Playback speed -->
          <button class="ctrl-btn speed-btn" id="speed-btn" onclick="cycleSpeed()" title="Playback speed">1×</button>

          <!-- Fullscreen -->
          <button class="ctrl-btn" onclick="toggleFS()" aria-label="Fullscreen">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Progress bar: 3 layers — track / buffer / fill — click-to-seek
timeupdate drives fill width and thumb position
vid.buffered progress indicator updates on buffer events
Hover opacity: controls show on hover, always show when paused (.paused class)
Big play overlay: shows when paused, hides on play
Playback speed: SPEEDS array cycling via speedIdx mod length
Volume range: accent-color:indigo, drives vid.volume and muted state
Spacebar toggle: document keydown, skips INPUT elements

About this UI Snippet

Video Player — Progress Bar, Buffer Indicator, Speed Control, Volume & Fullscreen

Screenshot of the Video Player snippet rendered live

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.

Step by step

How to Use

  1. 1
    Click the play button or video area to startThe video starts playing and the controls fade to a lower opacity. Hover over the player to show controls. The space bar also toggles play/pause from anywhere on the page.
  2. 2
    Click the progress bar to seekClick anywhere on the progress bar to jump to that position. The indigo fill shows playback progress; the lighter fill shows how much is buffered.
  3. 3
    Adjust volume and speedDrag the volume slider to set volume. Click the speaker icon to mute/unmute. Click the speed button to cycle through 0.5×, 0.75×, 1×, 1.25×, 1.5×, 2× speeds.
  4. 4
    Replace the video sourceUpdate the <source src="..."> tag with your video URL. Use an MP4 source for widest browser compatibility. Add a WebM source as the first option for better performance in Firefox and Chrome.
  5. 5
    Add a poster imageSet the poster attribute on the <video> element: <video poster="thumbnail.jpg">. The poster shows before the video loads and while it is paused at the start position.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component using useRef for the video element, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Video course and tutorial platform players
Online learning platforms need custom players that match their design system. The playback speed control (0.5×–2×) is especially valuable for educational content where users review concepts at different speeds.
Product demo and feature showcase video embeds
Replace default browser video controls with a branded player for product demo videos on landing pages. The dark gradient control bar looks professional against any video content.
Onboarding and documentation video guides
Support and documentation sites embed short video guides. The keyboard spacebar shortcut and visible-when-paused controls make the player accessible for users who prefer keyboard navigation.
Custom media library and video management UI
Admin panels and media libraries need players that integrate with their interface. The player's variables (fill width, time display, speed) are all accessible via JavaScript for integration with a playlist or chapter system.
Study HTML5 Video API: timeupdate, buffered, playbackRate
The player demonstrates the core HTML5 Video API: timeupdate for progress, vid.buffered for buffer tracking, vid.playbackRate for speed, vid.requestFullscreen for fullscreen. These APIs power every custom video player on the web.
Portfolio case study and showreel video players
Creative professionals embedding portfolio showreels benefit from a custom player that matches their site's dark theme. The overlay play button and gradient controls look polished on dark and light backgrounds alike.

Got questions?

Frequently Asked Questions

The snippet uses a sample Big Buck Bunny MP4 from Google's CDN. The iframe sandbox may block external resources in some environments. For production, host the video file on your own domain or CDN and set the correct CORS headers. If you need a test video, use a data URI for very short clips, or host locally with a simple HTTP server.

Add chapter data as an array: const chapters = [{time:0,label:"Intro"},{time:120,label:"Main"},{time:300,label:"Summary"}]. After the progress bar, map each chapter to a position marker: const marker = document.createElement("div"); marker.className = "chapter-marker"; marker.style.left = (chapter.time/vid.duration*100)+"%"; progressWrap.appendChild(marker). Style .chapter-marker as a 2px white vertical line.

Add a <track> element inside the <video>: <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English" default>. The browser renders the WebVTT captions automatically. For a custom subtitle display, use vid.textTracks[0].oncuechange to read the current cue text and update a custom overlay element instead of using the native caption rendering.

Click "JSX" to download. Use useRef(null) for vidRef, playerRef, etc. Replace document.getElementById calls with ref.current. Attach event listeners in useEffect: vidRef.current.addEventListener("timeupdate", handleTimeUpdate). Return cleanup: () => vidRef.current.removeEventListener("timeupdate", handleTimeUpdate). For the keyboard listener, attach to document in useEffect with cleanup to prevent multiple listeners.