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
Indigo: A Video.js v10 Skin
I built Indigo around one simple idea. Most video players spread their controls across bars, rows and corners. I wanted to see what happens when everything lives in one floating pill.
Play, volume, the seek bar, time and settings all sit inside a single glass capsule that floats over the picture. The seek bar lives inside the pill. At rest it is a thin 3px line. When you reach for it, it grows to 6px, a thumb fades in, and the part you have already watched glows in indigo. Time is shown in JetBrains Mono, the way a real timecode should look. The pill uses a soft blur, a gentle shadow and a fine light edge on top. In the light scheme the pill turns to pale glass and the indigo line stays.
It is built on the Video.js v10 scaffold, written as markup and CSS, with no legacy videojs() API. Every control works from the keyboard, focus is always visible, and it respects reduced motion, forced colours and reduced transparency. It works in light and dark, on desktop and on mobile, with proper 44px touch targets.
I did not stop at one design. I built five more directions alongside it and judged them against each other: Aurora Glass, a merged glass capsule, Ember, a cinematic layout with no bar at all, Duo, two detached control islands, Cinema Noir, an editorial film direction, and Pixel Play, a modernised arcade HUD. Indigo is the one that earned its place, so Indigo is my entry.
Live demo: https://indigo-orcin.vercel.app/preview.html
Code: https://github.com/haseebpir/indigo
Figma design file: https://www.figma.com/design/sNC6EfwTYauoRLs92zVwbi
Walkthrough video: https://player.mux.com/UAxu3eRTUwX2Rw4LIKo2IJ01RyFCUI6j7LCZpFDRA2Ko
Live site: https://thehitekagency.com/indigo
Designed and built by Haseeb P., CEO, The Hitek Agency, Houston, Texas, USA.
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
MARGEM — Beyond the Frame
What if a video player could become a space for exploration rather than just a timeline?
MARGEM is an experimental Video.js v10 skin that reimagines video navigation through spatial interaction, editorial design, and motion.
At its center is an animated tesseract inspired by four-dimensional geometry, accompanied by a 3D chapter atlas and interactive notes.
The concept explores a balance between visual experimentation and practical usability, keeping the video itself at the center of the experience.
Created by Athos Figueiredo, a Brazilian creative director and digital experience designer with 21 years of experience across design, branding, and interactive media.
Built with AI-assisted development and a focus on original interaction design.
Live demo: https://figueira-margem.netlify.app/
#videojsskinschallenge #VideoJS #Mux #CreativeCoding #InteractionDesign #WebDesign
A 3D chapter atlas is a bold idea for navigation. Really interesting to see a skin treat the timeline as a space to explore while still keeping the video at the center.
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!
GlowFlow - Premium http://Video.js Skin. I designed a modern player with both Dark Mode and Light Mode. It has a glowing play button, clean progress bar, and easy controls for volume, captions, quality, and fullscreen. It is responsive, accessible, and easy to use on phone and computer.
