One floating pill
The whole control bar is a single capsule — 88% of the player width, capped at 760px — floating 20px above the bottom edge, its border drawn with box-shadow the way Linear draws it. No second row, and no bar bolted to the frame.
Video.js Skins Design Challenge · Contra × Mux
Indigo — a Video.jsv10 skin
A floating-pill player skin designed & built by Haseeb P. for the Video.js Skins Challenge (Contra × Mux).
Live demo — press play. It plays a 90-second clip from Blender’s Big Buck Bunny, hosted on Mux.
The design
One pill. Everything in it.
Indigo re-skins the Video.js v10 player as a single floating obsidian pill, in the manner of the Linear release player: one slim capsule detached from the bottom edge, holding everything in a single row — play, volume, the seek track itself, a mono-spaced timecode and the utility buttons. It is painted onto the standard v10 components, so every control, menu, hotkey and announcement keeps working exactly as the framework intends.
The seek lives inside
The seek track is a flex item inside the pill, between the volume button and the timecode. It swells from 3px to 6px on hover, focus or drag, and the played fill is solid indigo #5E6AD2 with a soft glow — the skin's single accent, spent exactly once.
Mono-spaced timecodes
Time is set in JetBrains Mono — 12px, tabular figures, the current time bright and the duration dimmed — which gives the pill its engineering-diary character and keeps the readout steady as the numbers change.
Obsidian glass
The pill is dark glass — rgb(18 19 22 / 0.82) with a 20px backdrop blur and 160% saturation. Menus, tooltips and the volume popover use the same surface a touch stronger, so they read as the pill's companions, not foreign panels.
Light + dark schemes
In the light scheme the pill turns pale with ink text while the indigo stays untouched. The skin syncs to the host page's colour-scheme and to the OS preference, and reduced-transparency and forced-colours preferences are honoured.
Keyboard accessible
Touch targets are 44×44px even though the visible buttons are 36px, the indigo focus ring is never removed, and the pill stays visible while anything inside it has keyboard focus. The player's hotkeys, status announcer and error dialog all keep working — the skin is a paint layer, so no behaviour is forked.
Have an idea to buildor improve?
Tell us your idea, your goal and what is slowing you down right now.