The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Title
Arcade: a Video.js 10 skin that turns the player into an arcade cabinet
Live URL
https://arcade-skin.vercel.app/
Mux public playback ID
fNEeWPY4UUEkfCFd9617w8gvYFEsFOv72rPQj3qKG700
Description
Arcade turns the Video.js 10 player into a photoreal arcade cabinet. A neon VJS × MUX marquee sits above a glowing CRT tube, with a control deck and front panel of real arcade buttons below it. My aim was a player that's fun to play with but still works as a player. Behind the art, every control is a Video.js component with its own role, translated label and keyboard support.
Joysticks: both are real ARIA sliders. The left stick scrubs the film, going faster the further you push it. The right stick sets the volume and shows it on a 10-LED meter. They work with mouse, touch and keyboard, and spring back when released.
Screen and status: the time is shown on a 7-segment readout and the chapters on an LED seek strip. When the film ends, the CRT collapses to a dot.
Arcade options card: opens on the screen itself. It turns on a WebGL curved-CRT shader, a typewriter dialogue box for captions, sound effects and vibration.
Arcade extras:
Level select shows the film's chapters as game levels.
TURBO speeds playback up.
A how-to-play card lists the controls.
Typing ↑↑↓↓←→←→BA turns on a secret 8-bit mode.
Four "cartridges" recolour the whole cabinet from one public token.
Accessibility:
One visible focus ring covers every control.
Touch targets are 44px or larger.
A compact layout is built for phones.
All animation stops when reduced motion is on.
High-contrast and forced-colours modes are supported.
Mux: the film is Sintel, streamed from Mux, with Mux Data enabled.
Such a fun arcade concept.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I Designed a custom skin for the Video.js v10 player.
In Video.js v10, a skin is the player’s interface: the UI components plus the styles that present them. Video.js is open source and community-driven, and the player can end up on almost any website, so every skin makes a choice: how much personality it has, how well it fits into someone else’s design, and how far it pushes the controls. This was all incorporated into the design from scratch. The built-in v10 skins show this range. Creativity and mastery are incorporated to produce something nice and pleasant.
videojs.org
Video.js | Open Source Video Player
The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
Please make sure you've shared a public link for us to view your project!
Who wants to come to a picnic with an outdoor movie? I'll bring the video player 🧺🎬
Picnic Cinema is my new Video.js skin: a 3D garden cinema where the controls hang as tags from festoon bulbs. The lights glow when you pause and dim when the film starts.
Too comfy to reach the bulbs? Grab the remote on the picnic table.
You can still use the keyboard like a normal player: Space to play, arrows to seek and change the volume, F for fullscreen.
this is such a fun concept!
Press Proof — a Video.js v10 skin that prints its controls
Press Proof treats the player as a sheet on a proofing table. Most skins float translucent controls over the picture and hope the footage cooperates; this one prints them, in solid ink on an off-white paper strip, so they read the same over a night sky or a snowfield (ink on paper is about 16:1).
Every mark comes from the print shop and has a job. The timeline is a printer's colour bar with ruler ticks and a hatched buffer, the scrubber is a registration target, fullscreen is a pair of crop marks, volume is a ten-step densitometer scale, and the big play button is a registration target whose cyan and magenta plates sit slightly off register. The one piece of motion with a personality is misregistration: hover a control and its plates slip and snap back into register. With reduced motion on, nothing travels.
It stays usable for everyone: all controls in visual order on the keyboard with a single magenta-on-paper focus mark, menus that close with Escape and return focus, touch targets of 40 px or more, a full-bleed strip on phones, RTL support, and a clean fallback to system colours in Windows High Contrast. Icons were drawn for the skin; type is IBM Plex Mono. The demo page switches between bright footage (our Mux asset) and dark footage so legibility can be judged over both, and links to the skin workbench for sizes, ratios, languages and RTL.
Built with an AI coding assistant (Claude Code) from the Video.js CLI Scaffold starting point, under human art direction and review.
Footage: Big Buck Bunny (excerpt), © Blender Foundation, CC BY 3.0, hosted on Mux; NASA Cosmic Dawn trailer (Video.js demo asset). Typeface: IBM Plex Mono (OFL). Skin licensed under Apache-2.0. Design and build: Rui Codex, Belgium.
