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
I built Sleeve, a Video.js v10 skin for video and audio.
Most player skins I see are rounded glass buttons floating over the video. I wanted one that looks printed. So I treated the video as the photo on a record cover and put the player on it in black ink: square corners, 2px lines, condensed capitals.
There is one block of colour and it tells you the state. Orange before play, yellow while playing, blue when paused, green at the end. It changes size too. Before you press play it is a full cover panel with the title and running time. While you watch, it shrinks to a thin progress line at the bottom.
Audio gets its own skin, Side B. With no picture to show, the cover is the player.
Each control sits on its own solid cell, so you can read it over any footage. I used Video.js v10’s own elements and plain CSS. You can run the whole player from the keyboard, touch targets are 44px, and it comes in light and dark. Live streams and chapters work too.
Apache-2.0. #videojsskinschallenge
One color block doing all the state work is such a clean idea. And Side B for audio, love it.
Looks clean and awesome
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.
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?
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
