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 "Obsidian Glass", a modern, cinema-grade streaming player skin designed for Video.js v10. Inspired by premium OTT streaming experiences (like Amazon Prime Video and Apple TV+), Obsidian Glass brings sleek glassmorphism styling, clean visual hierarchy, and interactive features into the open-source web player ecosystem.
Key Features & Design Thinking:
• High-Contrast Edge-to-Edge Timeline: Engineered a prominent segmented timeline bar with distinct chapter markers, glowing real-time progress fill, buffer indicators, and dual time labels (elapsed time on the left, negative countdown remaining time on the right) with ambient drop-shadows to ensure 100% legibility over bright and dark footage alike.
• Focused Controls & Minimal Distraction: Centered quick 10-second rewind/forward jump buttons flanking a prominent dark-glass play/pause button, leaving the video content front and center.
• Interactive Slide-Out X-Ray Drawer: Implemented an unobtrusive slide-out panel allowing viewers to browse scene trivia and soundtrack info without interrupting playback.
• Responsive & Accessible: Fully keyboard-operable, thumb-friendly touch targets on mobile devices, clean focus outlines for accessibility, and reduced-motion compliant.
Check it out and let me know your suggestions.
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?
AURA - Glassmorphism VisionOS Player
I built AURA, a premium glassmorphism skin for Video.js v10 inspired by Apple VisionOS and modern cinematic UI.
Features:
Large frosted glass big-play button with backdrop-blur and soft glow
Floating pill-shaped control bar (like Apple TV) with glass effect
Gradient progress bar from purple to cyan
Fully responsive, accessible, pure CSS - no extra JS
Designed for immersive ocean/nature content
The goal was to make video controls feel like part of the content, not on top of it. Elegant, minimal, and futuristic.
Built with Video.js 8.10.0, pure CSS backdrop-filter.
#videojsskinschallenge
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?