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
TRBN VHS — a Video.js v10 skin built as a 90s television with a tape deck.
The left screen is a shelf of tapes, the big screen plays the film, and the deck below is the remote: REW, PLAY, FF, EJECT, a volume knob and a jog knob.
Pick a tape and Skully, the little LED skull who lives in the display, brings it over in his bony hand and pushes it into the front-loading slot. Sometimes he misses the slot. Sometimes the flap sticks and he has to shove it in. Then he watches the film with you and comments on what is on screen.
Nothing jumps: clicking the timeline, pressing J/L or the arrows winds the tape to that spot, with snow bands, tracking wobble and motor sound, like a real VCR. Full screen keeps the curved glass, scan lines and deck instead of showing a bare video.
What is inside:
— built on Video.js v10 custom elements: play, time slider, time, mute, volume, fullscreen, hotkeys, gestures, status announcer, buffering and error states
— 8 public-domain films from the 1920s–60s, starting with Disney's The Skeleton Dance (1929)
— a 3D cassette and hand made in CSS, with deck sounds generated in the browser (no audio files)
— keyboard control for everything, visible focus, screen reader announcements, reduced-motion and high-contrast modes
— a separate phone layout: picture on top, slot and keys under it, shelf below
— all 30 languages of my site, including right-to-left
Such a cool idea. Gives the spooky vibes!
Thanks! Not a coincidence that The Skeleton Dance is the first tape on the shelf.
love this
Thanks Weijian, appreciate it!
Nice looks awesome
Thanks Ammar, glad you liked it!
Thanks Eros! With reduced motion on it goes straight to the spot. You still get a quick REW/FF label and the snow bands, but they're frozen: no rolling, no picture shake. And Skully stops missing the slot in that mode, he just loads it clean.
The VCR controls and the tape menu are such a fun idea, it really feels like a 90s TV. Good luck in the challenge!
This turned out so well! I had so much fun exploring it. I loved the little touches, from the language options to the realistic 3D details. And those video transitions felt so authentic and nostalgic. Congrats, I absolutely loved it! ✨
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
Luminary - A Video.JS skin
34 - Skin Styles/ Themes
Let me know your favorite one.
Thank you!
34 styles is wild. Hard to pick a favorite, impressive range.
Plate is an HTML skin for Video.js 10. It draws the player the way quickflow.dev draws everything else: a numbered head with a status word, the picture framed by corner marks, a chapter index beside it, a ruler for a timeline and text keys underneath. A player is a diagram of a video's time, so I drew it like one.
What it does
Every chapter cue gets a button in the index, with its own frame from Mux's storyboard. Video.js has no chapter navigation control yet, so a small custom element reads the cues from the player store. Below 760px the index turns into a strip that scrolls with the video.
The time slider is a ruler, with a numbered mark where each chapter starts.
The keys are words you can read. Speed, Quality, Captions and Audio open Video.js menus. Space, K, M, the arrows, J and L, 0 to 9, < and >, F, C and I all work from the keyboard, and every control shows a focus ring.
In fullscreen the picture goes edge to edge, the controls fade while it plays, and an Index key opens the chapters as a side panel.
It comes in three themes (Night, Blueprint, Signal), takes your colours, fonts and corners through public custom properties, and speaks seven languages: English, German, French, Spanish, Romanian, Russian and Arabic, right to left included. It follows reduced motion, higher contrast, reduced transparency and forced colors.
The workbench at plate.quickflow.dev lets you try it on your own video, change every property, watch contrast and control names in a live accessibility readout, and download the CSS for your theme.
Plate plays the showreel on quickflow.dev. The code is open source under Apache 2.0.
does the chapter index stay visible in fullscreen or does it tuck away?
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.