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
Aero, a Video.js skin that looks like a 2007 media player.
I grew up on that era of glossy, bubbly software and wanted to see if it could work as a modern player without the bad parts. The shell is glass, the buttons are orbs, and the seek bar fills up like a tube of liquid, bubbles and all. It’s split into the video’s chapters.
The gloss stays on the frame. Time and chapter sit on a dark LCD strip so you can always read them, whatever’s playing. There are three colors: Sky, Lime and Berry.
It works on phones, does a floating dock in full screen, and you can run the whole thing from the keyboard.
I made the demo video for it too.
Love the Fruitiger Aero style, one of my favourite design styles!🐠🫧
Yes, so nostalgic.
2007 media player nostalgia hits hard. The seek bar filling like liquid is perfect.
aero brings back that glossy 2007 era so well, nostalgic but still feels like a modern player
So innovative and spot on 👏
The orb buttons and the glossy shell took me straight back to Vista. Love that the seek bar fills like liquid, we both went for water in our skins 🙂
They really were! Thanks for checking mine out, good luck with Aero 🙌
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
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
Well done.
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?
BETWEEN TWO WORLDS — A Cinematic Video.js Experience
Between Two Worlds is a cinematic video player experience built with Video.js v10, designed to transform video playback into an immersive visual journey.
Inspired by the mystery of crossing between two worlds, the project combines a deep purple and gold aesthetic, elegant typography, atmospheric animation, and a customized Video.js interface.
Rather than presenting a conventional video player, I wanted to create an experience where the visual identity begins before playback and continues through the player controls.
Key features:
Customized Video.js controls with purple and gold styling.
A cinematic animated introduction with smooth transitions.
A coordinated video poster and visual identity.
Responsive styling and familiar playback functionality.
A live, interactive experience accessible directly in the browser.
The goal was to demonstrate how thoughtful visual design can make a video player feel like an integral part of a story, rather than simply a tool for watching it.
Between Two Worlds has a strong cinematic mood. Nice work.