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
Walkman VJS-10: a Video.js skin inspired by the classic cassette Walkman
I wanted a video player that feels like a physical object, not just a set of controls. Walkman VJS-10 turns the Video.js player into a brushed-metal stereo unit with a video screen, a cassette window, VU meters and chunky transport buttons.
What it does
Three tapes: Sunset Highway (Side A), Blue Hour (Side B) and Golden Reel (Side C). Switching tapes swaps the video like loading a new cassette.
Cassette-style controls: Rewind, Play, Fast Forward, Volume and Eject (fullscreen), each with its own color-coded accent.
Live tape counter: a green LCD readout shows elapsed and total time.
Three body finishes: silver, purple and gold.
Aspect ratios: switch between 16:9, 4:3 and 21:9.
Keyboard shortcuts: Space to play and pause, ← → to seek, M to mute.
Three tapes — Sunset Highway on Side A, Blue Hour on Side B, Golden Reel on Side C — and switching tapes swapping the video like loading a new cassette is exactly the kind of physical-object thinking that makes this more than a retro paint job. Making Eject the fullscreen button...
Thank you
Three named tapes with sides and VU meters, the Walkman details are spot on.
Thank you
Three named tapes with sides is such a nice way to turn a playlist into something you can hold. Eject as fullscreen made me smile. The three body finishes are a great touch too, I'd pick the gold one.
Thank you
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 turned a DJ deck into a video player. Every control does a real player job: the jog wheel scrubs, the tempo fader sets playback speed, eight hot-cue pads jump between chapters and light the current one, and the waveform strip is the seek bar, built from the film's real audio peaks.
The deck sits below the video, never on it, and anyone finds play, volume and fullscreen in a second.
I built it on Video.js v10 in plain CSS and 4 KB of TypeScript, with no images or web fonts. It's keyboard-operable, respects reduced motion, contrast and forced colors, and re-brands through a few tokens.
The look is my own Baltic palette: deep green deck, cream labels and amber LED glow.
Try it: https://videojs-cdj-skin.vercel.app, also live on my site: https://modestasgrz.github.io
Film: Tears of Steel © Blender Foundation, CC BY 3.0, streamed from Mux (playback ID lNg95EGnssc00hkLLQSCG02an2R3Ss702005HBDpEXYPBZk).
Hot-cue pads for chapters and a real audio waveform, every control earns its place.
My idea was simple: keep the feeling of a cassette, lose everything that made it slow.
Clear Tape is a Video.js v10 skin inspired by the clear-shell cassettes of the 90s. I wanted nostalgia without the costume, so every cassette detail had to earn its place by doing a real job:
• The seek bar is the tape path between two reels. As you watch, the left reel thins and the right one fills, so you read progress before you read the time. The reels turn while the video plays and spin faster when you scrub.
• Transport keys travel down when pressed, and Play stays down while the tape runs, like a real deck.
• Time lives in a monospaced tape counter. The title is a paper label with a Side A tab.
• Volume is a mixer fader, and settings open like a J-card above the deck, so they never cover the tape.
The deck is smoked glass, so the video stays the hero. It is minimal on purpose: one accent color, one typeface, nothing decorative that does not also function.
The demo film tells the same story. It opens on a cassette clicking into a player, then follows one listener as the device in their hands changes with every beat, from the 1980s to tomorrow, until only the music is left. It moves from dark, warm rooms to bright, bare ones, so you can see the controls stay readable over both.
Built to be used:
• Works with mouse, touch and keyboard, with a clear focus ring on every control
• Sheds secondary keys on small players instead of shrinking them
• Reels stop with reduced motion; the glass turns solid with high contrast or reduced transparency
• Accent color, font and corner radius follow the standard Video.js CSS variables, so it re-themes in one line
Made with Video.js v10, HTML and plain CSS, starting from the Scaffold skin. Video hosted on Mux. The demo film was generated with AI.
Live demo: https://clear-tape.vercel.app/preview.html
Mux playback ID: 6Xx8O7aJDIyKnYt8JWXV9raHdl62VzR02k8Y15D5p37s
Nostalgia without the costume, great principle. Every cassette detail doing a real job is the way.
I made a skin that turns the video player into liquid glass.
The controls are a row of glass cards along the bottom. Hover one and it opens into a window holding its control, while play stays fixed.
link - https://coco-max.vercel.app/
Github repo - https://github.com/suvo-sos/coco-max
Keeping play fixed while the glass cards bloom open around it is the smart part — you get a whole window of controls without ever losing the one button your thumb is looking for. The liquid-glass look suits that too, since the controls feel like they're part of the picture...