Skin notes — the brief, point by point

1. 01

   Real Video.js v10

   Every control is a v10 HTML element: 43 UI modules of @videojs/cdn 10.3.0, self-hosted, with no build step.

2. 02

   Five core controls

   Play, seek, time, volume and fullscreen stay on screen at every size. Speed, picture-in-picture and scene jumps join them when there is room.

3. 03

   Bright and dark frames

   Labels never sit on the picture. They sit on the capsule, where ink measures 12.5:1 or better.

   White card Black card

4. 04

   Keyboard

   Tab reaches every control in reading order. Esc closes the menu, the light table and the cards.

   Shortcuts ?

5. 05

   Touch

   Player targets are 44 px or larger. Double-tap either side of the picture to skip 10 s.

6. 06

   Visible focus

   A two-tone ring, 3 px of terracotta inside a paper halo, so it shows on the capsule and on any frame.

7. 07

   Reduced motion

   The page follows the system setting. This switch overrides it either way, and remembers.

   Motion · Full

8. 08

   Responsive

   Container queries refit the capsule to the player, not the window. Checked from 360 px phones to 2560 px desktops.