A skin for Video.js 10

Iris

A video player machined like a lens. Controls you already know how to read.

The ring above follows the player’s speed. Change it with the 1× button, or press < >.

SpaceKPlay / pause
←→Seek 10 s
↑↓Volume
<>Speed
MMute
CCaptions
FFull screen
IPicture in picture
09Jump to 0–90%

Wing It! (CC) Blender Foundation | studio.blender.org, CC BY 4.0. Streamed from Mux.

01The controls

The controls you know, easier to read.

Play, timeline, volume and speed sit where you expect them. Each one shows its own state on its face, so you can read the player at a glance without opening anything.

The Iris controls up close over a bright sky: a full-width timeline split into chapters, and under it the volume button, the round play button with its progress ring, and the speed button reading 1×.

02Fits any site

At home on any website.

The controls sit on dark frosted surfaces, so they stay readable over any video. A site changes one color and one corner radius, and every part of the player follows. Try it below.

Site

Device

Accent

Corner radius

03Every state

Every moment of playback, designed.

From the first frame to the last, with a mouse, a keyboard or a thumb. Here are all 25 states, captured from the real player. Scroll the list, or pick one.

Before playback: a large round play button in the middle of the poster. — 01 / 25Start and endDesktop

Start and end

Watching

Finding a moment

Sound

Speed and quality

Captions and help

On a phone

04Design thinking

Why it looks like a lens.

A watch says a lot in a small, round space. Iris works the same way, borrowing from a camera lens and a watch. Four numbers explain most of it.

10Steps

Volume, in detents

Hover the dial and it stretches into a scale with the level at its end.

7Speeds · one move

Any speed in one click

Seven round keys roll out of the speed dial. Not a button pressed six times.

0Repeats

Settings, straight to quality

Rows appear only when there is a real choice. Nothing repeats a key already on screen.

25States

Every state, designed

Loading, errors, captions, phones. Dark frosted surfaces keep each one readable.

Volume · real capture

Speed · real capture

Settings · real capture

05Specifications

Built on Video.js 10. Sized by one number.

Every size in Iris is a multiple of --media-scale-unit, written u below. Change that one value and the whole player scales, from a small embed to full screen.

Drawing 01Control row, to scale

1u =

u = --media-scale-unit, 16 px unless you set itSizes step up at player widths of 1200, 1600 and 1920 px

Player: Video.js 10.3, HTML
Made of: HTML and CSS in the Video.js skin format, plus one small script for the speed keys, the volume capsule, phone menus and focus
Video.js parts: Hotkeys, gestures, sliders, menus, tooltips, indicators, error dialog and status announcer
Layouts: Desktop, and a phone layout for players narrower than 480 px
Custom properties: --media-accent-color--media-accent-text-color--media-border-color--media-border-radius--media-font-family--media-scale-unit--media-object-fit--media-object-position
Video: HLS streamed from Mux: Auto, 1080p, 720p, 480p and 270p
Chapters and captions: WebVTT tracks. The sound captions were written for this film.
License: Apache 2.0
Made by: Sabik Biswas

06Accessibility

Made for everyone, from the start.

Iris covers every point in the challenge’s accessibility guide, and an automated WCAG 2.1 AA check finds nothing to fix.

Readable over any video

Text and icons sit on dark frosted surfaces, never straight on the picture. They read the same over a bright sky and a black frame. Drag to compare.

The play button with a white focus ring and a dark halo.

Focus you can see

Press Tab and a white ring with a dark halo marks your place on any frame. A tap or click leaves no ring behind.

Every control by keyboard

Tab reaches every control in the order you see them. Arrow keys move inside menus and the speed keys, and Esc closes them.

A phone-sized player with dashed outlines showing the touch area around each button and the timeline.

Big enough for a thumb

On touch screens every button and the timeline get a touch area of about 44 px, shown dashed here, without changing how they look.

Calm on request

With reduced motion on, rings stop sweeping, the lens blades stay still and the loading ring pulses instead of ticking. Changes fade instead. Try the switch.

A sound caption above the player controls.

Captions that never collide

Sound captions timed to the film. They lift above the controls whenever the controls are on screen.

Named for screen readers

Every control has a name and a state, and changes like pausing or muting are announced.

0violations in axe (WCAG 2.1 AA) at desktop and phone sizes, with menus open
HCWindows high contrast: the player switches to system colors
RTReduced transparency: every surface turns solid

Checked, not assumed

Tested with axe, with the keyboard alone and with touch at phone size, in Chrome and WebKit.

07Install

Add Iris to any page.

Three steps and no build tools. Or take the source and change anything.

Load Iris

<script type="module" src="https://iris-player.netlify.app/iris.js"></script>

Wrap your video

<media-i18n>
  <video-player>
    <iris-skin>
      <mux-video src="https://stream.mux.com/PLAYBACK_ID.m3u8"
                 playsinline crossorigin></mux-video>
    </iris-skin>
  </video-player>
</media-i18n>

Any Video.js media element works, including a plain <video>.

Set your look

iris-skin {
  --media-accent-color: #f6f2ea;
  --media-border-radius: 16px;
  --media-scale-unit: 16px;
}

The color and radius follow what you picked in Fits any site.

Own the source Get the code on GitHub Iris is plain HTML and CSS in the Video.js skin format, open source under Apache 2.0. Fork it, or paste it into a project made with npx @videojs/cli skin create, and change anything. No scripts allowed? Use the iframe embed For site builders that won’t run scripts. Pass the color and radius in the link, like ?accent=f6f2ea&radius=16.