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.

The aperture closing on pause is a beautiful bit of state design — you read the player's status without any text. Really elegant.

Turned a contribution graph into a skyline.

So interactive