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
LIFT: press the button, and the doors open on your film
LIFT is a Video.js v10 skin built like a lift. Two brushed-steel doors stand where the poster would be. Press the call button and they slide open on the film.
Every part of the lift is a real control. Chapters are floors: the directory on the door lists them the way a building does, and you can start from any floor. Pick a floor while the film plays and the doors shut, the dot-matrix display counts the floors, the chime rings, and the doors open again. One chime going up, two going down, as on a real lift. The braille under each button is real: it spells the name of the control. When the film ends, the doors close.
While the film plays, everything gets out of the way, so the picture is never covered. Every control sits on solid steel or dark glass, so it reads over any footage. Lift panels are designed for everyone, so this one is too: large round buttons, a lit ring on whatever is active, a white-and-black focus ring, full keyboard control, floor changes announced to screen readers, and a reduced-motion mode where the doors stop sliding.
It reshapes itself to the width of the player, takes the standard accent-colour and border-radius tokens, and comes in stainless or graphite. The film, Going Up, is hosted on Mux, and the skin is live on my renter decor site. Designed by Shad Soha.
Pretty neat....
Chapters as floors is genius. Elevator doors instead of a poster, so good.
the elevator doors sliding open on the film is such a charming intro, lift is a really fun concept 🛗
The braille under each button, spelling the name of the control, is a thoughtful detail that shows the lift was designed for everyone, not just as a look. The chime — one going up, two going down, as on a real lift — is a lovely, authentic touch too. If you have a moment, I'd...
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
Tactile — Paper Key: a Video.js v10 skin you can press.
Tactile treats the player as a desk object, not a screen overlay. Before drawing any UI, we modelled a small keypad in Blender: paper-white keys with an ink rim, a ribbed fader cap and a black status display. We pressed it, lit it, and flattened it piece by piece into CSS. Keys latch (1 px down, with a 2 px accent rim), faders scrub, and one display pill always says what the player is doing: PLAY 1.0×, PAUSED, LOADING or END. Play is the only orange key and everything else stays matte, so the dock reads the same over bright snow and a night street. Three glazes and one accent token let it fit someone else's site.
Keyboard-first with a visible ink focus ring, 44 px targets, Esc closes every menu, forced colors and reduced motion supported. Source (Apache 2.0): github.com/promoparkllc/tactile-paper-key
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 dark olive base with warm cream icons and text is a smart answer to the readability question — it keeps the controls legible over shifting woodland footage without breaking the smoked-glass, muted-brass mood. Starting from 'controls I can find without thinking' shows in how...
Kerf is a Video.js 10 skin built on one idea: cut the picture instead of covering it.
Most players float their controls over the video, then fight the footage for contrast with gradients and blur. Kerf cuts a notch into the player’s own frame and puts the controls there, on a solid surface in your product’s colour. They read the same over a white sky or a black night. Previews, menus and volume rise out of that frame from the control that opened them, and sink back when the film plays.
It’s built for modern SaaS and minimal products: one accent and one radius to set, plus light, dark or auto surfaces. It folds the controls away before the first play, and adds chapters, storyboard previews and captions as a notch. Every control works by keyboard, focus rings are visible, it honours reduced motion and forced colours, and it supports right-to-left layouts. axe-core reports 0 violations.
Plain HTML and CSS on @videojs/html with the official icons. Open source under Apache 2.0.
Cutting the picture instead of covering it is a really strong idea.