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
Phantom Café — a podcast player skin for Video.js 10
Meet Phantom Café — a Video.js 10 skin that treats a podcast player like a late-night café booth: deep charcoal-purple glass, glowing cyan accents, and one warm amber neon touch.
Podcast listeners scrub, skip, and change speed more than they watch, so the design puts a big, friendly play button and −10/+10 second skips in the center, with a second set of skips, a 1× playback-rate button, and the full control bar below. The seek bar fills cyan over a violet buffered track, the episode title sits up top like a marquee, and every control is a soft glass pill with a clearly visible cyan focus ring for keyboard users. Motion calms down automatically when reduced motion is on, and the layout stays usable from desktop down to phone widths.
Built with the Video.js 10 skin tools (HTML + CSS, Scaffold base), styled through the v10 design-token system. The demo art and clip are from Patch Notes, my gaming podcast — the skin is already dressed for its real job.
Live demo: https://phantom-cafe-player.netlify.app/preview.html
🎬 Phantom Café in motion — the demo video: the big café-glass play button, −10/+10 skips, a seek scrub, an episode picked from the library loading into the same player, and the speed button cycling on Episode 3. Built with the Video.js 10 skin tools. ☕🎙️
Putting the 10 second skips front and center is exactly right for podcasts, since people scrub far more than they watch. The amber neon against the cyan glass gives it a really nice late night mood.
Yeah seems like some just wanna watch clips instead.
Love the late-night café idea.
Thank you. I'm going for a smooth cyberpunky look.
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
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.
I Designed a custom skin for the Video.js v10 player.
In Video.js v10, a skin is the player’s interface: the UI components plus the styles that present them. Video.js is open source and community-driven, and the player can end up on almost any website, so every skin makes a choice: how much personality it has, how well it fits into someone else’s design, and how far it pushes the controls. This was all incorporated into the design from scratch. The built-in v10 skins show this range. Creativity and mastery are incorporated to produce something nice and pleasant.
videojs.org
Video.js | Open Source Video Player
The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
Please make sure you've shared a public link for us to view your project!
Meniscus is a liquid glass skin for Video.js v10. A meniscus is the curved surface of a liquid, and the whole player is designed as one.
The ripple. When you press play, one soft ripple runs through the video picture itself.
The glass. The controls are frosted glass tiles. They pick up colour from the film, so the player changes with every scene.
The drops. Back 10 s, Play and Forward 10 s are three glass drops joined by liquid. The playhead is a drop too, and it squashes as you drag it.
The sound. Each control makes a soft glass sound, created in the browser. It follows the player’s volume, goes quiet on mute, and can be turned off in Settings.
For everyone. Every button works with the keyboard and shows a clear focus ring. On a phone, the controls move into two rows and the menus use the whole screen. If your device asks for reduced motion or reduced transparency, the ripple stops and the glass becomes solid.
The film streams from Mux in every size from 360p to 4K. The demo clip and its music are only there to show the player. They are not part of the skin and are not covered by its licence.
