The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Darkroom — a film-archive skin for Video.js v10.
The idea. Most player skins decorate a rectangle. Darkroom treats every video like a print being pulled from an archive: the seek bar is a strip of film with sprocket holes, exposed safelight red as it plays; a typewriter slate labels the reel the way a canister does; buffering is a spinning reel captioned "Developing…". The palette is a darkroom at work — safelight red on deep charcoal, archive-paper cream for type, amber for volume level — and the type is Big Shoulders Display for titles with Courier Prime for timecode, because a timecode should look printed, not rendered.
Why this way. Video.js ends up on someone else's site, so the personality had to stay out of the footage's way. Controls sit on a frosted, tinted plate that keeps them legible over both bright and dark frames — I sampled frame brightness behind the bar to check that. The romance never costs usability: every target is at least 44px, focus rings glow safelight red, the bar slims down on phones through container queries, and grain, vignette and motion all switch off when reduced motion is requested.
What's in it. Play/pause, a film-strip seek bar with a hover time preview, timecode, mute and volume slider, playback rate, fullscreen, poster, buffering reel, error dialog and a replay state at the end. Tap to toggle, double-tap the sides to skip, double-tap the centre for fullscreen, plus Space/K, M, F, arrows and Home/End on the keyboard. The Tab path runs Play → Seek → Pause → Mute → Volume → Rate → Fullscreen and out again — no traps.
How it's built. Every control is a real v10 component — Container, Controls, TimeSlider with Track/Buffer/Fill/Thumb/Preview, VolumeSlider, PlaybackRateButton, FullscreenButton, Gesture, Hotkeys, StatusAnnouncer, ErrorDialog — presented through the skin's own design tokens rather than CSS overrides of the default skin, and screen-reader state changes go through StatusAnnouncer. Released under Apache 2.0.
Treating every video like a print pulled from the archive is such a strong frame. The safelight-red film strip seek bar and the "Developing…" buffering reel really sell it. If you get a minute, I'd love your take on Geiger ☢
Buffering as a spinning reel captioned Developing... is a perfect detail.
Labelling the reel with a typewriter slate, the way a canister is labelled, and setting the timecode in Courier Prime because it should look printed, not rendered, shows how far the archive idea goes. The frosted plate keeping controls legible over bright and dark frames is a...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
What if your video player felt more like an audio amp knob and less like clicking a spreadsheet?
Threw my hat into the #videojsskinschallenge with Detent.
Built it to work natively across everything—flick it with your thumb on mobile, drag it with a mouse, or scrub second-by-second using keyboard hotkeys.
Test drive the dial:
Be honest: would you swap the old flat timeline bar for a jog wheel?
Aurora Skin — The picture ends. The atmosphere doesn't. ✨
Aurora Skin is a cinematic video player interface designed for Video.js v10, inspired by the northern lights and the idea that a great viewing experience extends beyond the video frame.
Instead of treating the player as a collection of controls, I wanted to make the entire viewing experience feel alive.
The design combines translucent glass controls, atmospheric cyan and violet lighting, refined typography, and a distraction-free layout. Its Living Aurora system lets viewers customize the ambient lighting through three modes: Subtle, Balanced, and Vivid.
Every detail is designed to balance personality with usability, from responsive controls and keyboard navigation to accessible interactions and reduced-motion support.
My goal was simple: create a player that feels as memorable as the content it plays.
Built with Video.js v10.
#videojsskinschallenge
Darkroom treats the player like a film lab bench. The seek bar is a strip of 35mm stock: sprocket holes run along both edges, chapters are the gaps between spliced reels, played footage turns safelight red, and the playhead is a splice marker with a red notch.
Above the strip, amber edge print shows a working footage counter (feet + frames at 24 fps), the way an editing bench reads it. A small red safelight beside the title glows while the film runs.
Menus are cream contact-sheet labels, and the current choice is ringed in red grease pencil. Tooltips look like torn masking tape, and the settings icon is a six-blade aperture. All icons are hand-drawn for the skin.
Sprocket holes, spliced reels and a safelight red, the darkroom details are spot on.