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
WAYLINE — A Cinematic, Accessible Video.js Experience
WAYLINE transforms a standard video player into an immersive, journey-inspired viewing experience.
Built using Video.js, WAYLINE combines a distinctive dark-blue and yellow visual identity with intuitive controls, accessible interactions and a polished viewing interface.
What I built
Custom player experience: A visually distinctive interface designed around the journey of watching a film.
Accessible interactions: Keyboard controls, captions and player settings that make navigation easier.
Search and navigation: Interactive features that help viewers explore and move through the experience.
Responsive player presentation: Carefully designed layouts, controls and readable interface elements.
Video.js and Mux integration: A working player experience demonstrating real playback technology rather than static design mockups.
Why I built it
Most video players focus on functionality but give little attention to the experience surrounding the content.
I wanted to explore how a custom Video.js skin could make video playback feel more engaging, intuitive and accessible without sacrificing usability.
WAYLINE brings together visual storytelling, practical player controls and accessibility-focused design to show how a video player can become an experience in its own right.
What makes WAYLINE different
WAYLINE is more than a visual redesign. It demonstrates an interactive player with real controls, keyboard navigation, settings and playback functionality.
The accompanying demo showcases the working interface, design decisions and technical implementation.
WAYLINE — Where every frame becomes part of the journey.
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 wanted a video player that felt like it belonged in a museum, so I designed IWATO as a display case where every part of the case is a control.
It's part of a fictional Japanese game I came up with, built around the myth of Ama-no-Iwato, the rock door the sun goddess hid behind. So before the film plays, it waits behind that door. You press the bronze mirror and the door slides open.
The seek bar is a handscroll that unrolls as the film plays, with a painting for each chapter. The seals above it stamp red as you reach each chapter, and you can tap them to jump. The volume is a crest you turn like a dial, the captions button traces 字 in brushstrokes, and every press lets off a little fox-fire.
I made sure it works for everyone too: it's fully usable with a keyboard, passes accessibility checks, and tones down the animations if you have reduced motion on.
I painted the scrolls in Recraft, rendered the museum film manually in Blender, aided with Claude on Video.js v10.
A museum display case where every part of the case is a control is a wonderful idea, and tying it to the Ama-no-Iwato myth gives IWATO real depth. I'd love your take on Geiger if you get a minute ☢
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?
Well done.
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?