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
FRAME is an editorial skin for Video.js 10, and the short film journal around it. The picture is the page. Controls stay white on ink, sit in one bar, and leave when you stop reaching for them. The page’s accent colour is kept for its own buttons.
It is a real Video.js 10 skin, restyled from Scaffold. Play, volume, timeline, captions, settings, picture-in-picture, keyboard shortcuts, gestures, the error dialog, and the screen-reader announcer are Video.js components. Ours is the skin: an outline icon set, a bar playhead, chapter gaps, a storyboard preview that names the chapter, and menus set like a contents page.
One player runs the journal. A WebVTT chapters track drives the timeline, the chapter label, and the list on the page. Another title loads the next Mux asset into that same player. Tears of Steel streams from our own Mux asset, with official subtitles, Mux posters and storyboards, and real renditions in settings. Chromecast uses the Google Cast extension; AirPlay is there in Safari.
Controls white on ink that leave when you stop reaching for them, very calm. A film journal around it is a nice touch.
thanks
The storyboard preview that names the chapter is the detail I love most — hovering the timeline doesn't just show you a frame, it tells you where you are in the story. And setting the menus like a contents page carries the editorial idea all the way through, so the player and...
thanks , i have checked on it , what a nice concept idea you have
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’m picky about video players. Give me controls I can find without thinking, a timeline that’s easy to scrub, and enough room for the picture. That’s where All Terrain, my entry for the Video.js Skins Design Challenge, started.
The woods came later. I wanted to see how a minimal player would feel in a setting with a strong character of its own. Smoked glass and muted brass felt right against the woodland footage, and the controls stayed simple enough that I could imagine using the same skin on a portfolio or a film journal.
Both films stream through Mux, and I made a little rookie showcase video to give you a closer look at the desktop and mobile layouts, theater mode, and playback settings.
Public Mux playback IDs
The beauty of still frames by Pepijn Janssen — kDA2CntengmWSO2lKDMb01ZNj2FyyApJwCaE00WR6nWeg
Green by GawxArt — xHdOULPcXIZZaLIaLONfjOWigMq2wdP7thAbgw3EEjQ If you give it a spin, I’d love to hear what feels intuitive and what takes a second to find.
#VideoJSSkinsChallenge #VideoJS #Mux #Contra
The dark olive base with warm cream icons and text is a smart answer to the readability question — it keeps the controls legible over shifting woodland footage without breaking the smoked-glass, muted-brass mood. Starting from 'controls I can find without thinking' shows in how...
Pull into the drive-in and save three spots for your friends. 🚘
I built LOT 66, a custom Video.js v10 skin for the Contra challenge. Start a live watch room for up to four people and share the invite link. As each friend joins, their car lights up and their name appears above it. Everyone watches in sync.
I wanted the controls to feel like part of the car, so I built them into a vintage dashboard. The radio dial adjusts the volume, the tuning scale lets you scrub through the film, and the dashboard stays within reach in fullscreen.
Now showing the original 1960 trailer for Dinosaurus! 🦖
#VideoJSSkinsChallenge
FRAME | A Mondrian-Inspired Video.js Skin
My first take on Mondrian’s style used bold color blocks around the player, but they drew too much attention away from the video.
For FRAME, I moved those colors into the controls instead. Clean lines and geometric divisions keep the De Stijl influence, while small accents on the progress and volume controls bring color without competing with the content.
The layout adapts from desktop to mobile, keeping the viewing experience at the center.
#VideoJSSkinsChallenge #VideoJS #WebDesign