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
Submitting for the Video.js v10 Skins Design Challenge! 🎛️✨
Proud to present "Studio Synth Deck"—a high-end, tactile hardware-inspired video player skin built from scratch using HTML/JS and Video.js v10.
Key Highlights:
Cyber-industrial hardware aesthetic blending classic studio gear vibes with a modern dark mode interface.
Fully integrated with Mux Video for blazing-fast, high-definition streaming playback (y63sHMkeyNTV3FnmlPZ3xFFAHH5qthNLAoVLnxFU5Y).
Responsive touch and custom controls tailored for immersive media experiences.
Check out the live deployment here: [https://wonderful-croquembouche-9ad81b.netlify.app
Feedback and thoughts are always welcome! 🚀
Studio synth deck vibe, very tactile. Nice work Ali.
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 — 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!
13 styles in one skin, impressive range. Nice work.
Turn Four: Every Frame on the Racing Line
Turn Four turns the replay timeline into a circuit. Drag around the oval to seek, choose one of four sectors, loop a detail, slow it down, or mark a moment to revisit. Warm paper, graphite control surfaces, condensed typography, and signal orange give the interface its motorsports character. Video.js 10 handles the player, with keyboard controls, visible focus, descriptive captions, responsive layouts, and reduced-motion styling. The fictional automotive concept film moves through dusk, daylight, night, and an overhead composition so the controls can be judged against changing images.
racing line replays are weirdly satisfying to watch. is this running on real telemetry?
SIDE A - Press Play Like It's 1985.
What if a video player felt like something you could actually touch?
SIDE A is my take on a Video.js v10 skin, inspired by vintage tape decks and the tactile experience of analog technology.
I wanted to move away from the usual minimal video interfaces and create something with personality. Mechanical-style playback buttons, a rotary volume knob, aged brass details, retro typography, and subtle CRT effects all come together to make the player feel like a physical object rather than just another interface.
But the idea wasn't simply to make something nostalgic. I wanted to show that an unconventional design can still be intuitive and accessible. SIDE A is built with responsive controls, keyboard navigation, visible focus states, touch-friendly interactions, and reduced-motion support. In fullscreen, the tape deck transforms into a minimal control tray, keeping the focus on the content.
The result is a balance between old-school character and modern functionality.
Because sometimes pressing play should feel as good as watching what's playing.
Built with Video.js v10 and released under Apache License 2.0.
Press play like it's 1985, love the tape deck feel.