Obsidian Glass: Cinema-Grade Video.js v10 Player SkinObsidian Glass: Cinema-Grade Video.js v10 Player Skin
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
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.
Back to feed
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