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
I’m picky about video players. Give me controls I can find without thinking, a timeline that’s easy to scrub, and enough room for the picture. That’s where All Terrain, my entry for the Video.js Skins Design Challenge, started.
The woods came later. I wanted to see how a minimal player would feel in a setting with a strong character of its own. Smoked glass and muted brass felt right against the woodland footage, and the controls stayed simple enough that I could imagine using the same skin on a portfolio or a film journal.
Both films stream through Mux, and I made a little rookie showcase video to give you a closer look at the desktop and mobile layouts, theater mode, and playback settings.
Public Mux playback IDs
The beauty of still frames by Pepijn Janssen — kDA2CntengmWSO2lKDMb01ZNj2FyyApJwCaE00WR6nWeg
Green by GawxArt — xHdOULPcXIZZaLIaLONfjOWigMq2wdP7thAbgw3EEjQ If you give it a spin, I’d love to hear what feels intuitive and what takes a second to find.
#VideoJSSkinsChallenge #VideoJS #Mux #Contra
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
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
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.
Luminary — Multi-Style Video.js Skin
(**Please respect the original work and do not copy this multi-theme skin concept.**)
An elegant, constraint-free UI built to elevate any production.
**13 expertly crafted styles to suit your taste
**Fully responsive across all screen sizes
**Ready to use right out of the box
**When designing the core frame, my goal was to create a versatile, eye-catching player that fits any project seamlessly. Across all 13 variations, I focused on blending popular, in-demand aesthetics with timeless themes so every creator can find their ideal match.**
Let me know which style is your favorite in the comments. Thank you!