Iris: a Video.js 10 skin shaped like a camera lens

Iris is a Video.js 10 skin shaped like a camera lens and read like a watch. Pause and the blades shut. Scrub and the preview opens like an iris.

The problem A skin ends up on sites its designer never sees, from a podcast to a portfolio. Most skins choose between personality and fitting in. Iris keeps every control where people expect it and puts its personality into how things move.

The idea A lens and a watch are the most legible small, round interfaces people own.

Play sits in a lens. Its ring fills chapter by chapter, so progress reads at a glance.

Scrub, and the preview opens like an aperture, from a small circle to the full frame.

Speed rolls out into seven keys, 0.5× to 2×. Any speed is one move, not six presses.

Volume stretches into a capsule with ten steps and the level at its end.

Press a key, and the feedback grows from the control you would have touched.

Easy on any screen Settings opens straight on quality from Mux and only shows a row when there’s a real choice. On phones, menus become a sheet across the player, within reach of a thumb.

Accessible by default Every control works by keyboard, with a visible focus ring, and menus can be closed from the keyboard. Dark frosted surfaces sit behind every control, so icons stay readable over bright and dark footage. Captions, reduced motion and forced colors are built in, and the screen-reader announcer comes from Video.js 10.

Polish All 25 player states are designed, from loading and errors to captions and the end screen. One accent and one corner radius restyle everything. Iris is built from Video.js 10’s own components and is open source under Apache 2.0.

Streamed on Mux Everything you watch comes from a single Mux asset. Mux streams the film in adaptive quality, so the Settings menu opens on real renditions, from Auto up to 1080p. The poster is a Mux thumbnail, and every frame inside the iris preview comes from Mux’s storyboard, so the aperture opens onto the exact moment you’re scrubbing to. Mux playback ID: lIEE8jhRtmZTwvTyz1t5V01b4PukwZBSzXHnuxMGMtRc

The film Wing It! (CC) Blender Foundation | studio.blender.org Licensed under CC BY 4.0. Sound captions written for this demo.

I like the restraint here, especially considering how tempting it must have been to make every interaction behave like a camera lens.

The interesting thing about familiar controls is that users rarely appreciate them until someone changes them. Then suddenly even a simple action...

Millennium MC-2000 is a see-through Y2K flip phone that plays video. The keypad isn't decoration: every key is a real Video.js shortcut. 1–9 jump to 10–90%, OK plays, the D-pad seeks and sets volume, ✱ is captions, # is fullscreen.

The status bar is live player data: signal bars show the buffer, the battery shows volume, the clock shows time, and a ✉ arrives with each new chapter. Under 480px the lid closes and flips open on demand.

Every key is 44px and keyboard-reachable, and with reduced motion or transparency the shell turns solid and still.

It works with any video: millennium-mc2000.netlify.app/?media=plain

More explorations: two more skins I designed, switchable live on the same film, at zazzy-skins.netlify.app (House, built from videojs.org's own brand, and Darkroom, a film-developing player).

Film: "Caminandes 3: Llamigos" by Blender Foundation, CC BY 3.0.

Lovely work Zazzy