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
This is my submission for the Video.js Skins Design Challenge!🚀
Nubi is a playful, animated video player designed for kids and family content.
Why this niche: children's video is one of the most-watched categories online today and one of the most valuable for creators and platforms.
☁️ What makes it special:
• Interactive googly eyes peek over the frame
• Day and night mode: a bright pastel sky with fluffy clouds, or a calm starry night where the eyes get sleepy.
• A friendly, easy-to-use look
• On phones it becomes a vertical 9:16 video with thumb-friendly controls.
Built with Video.js 10, fully keyboard accessible, legible over any footage, and calm with reduced motion.
(Film: "WING IT!" by Blender Studio, CC BY 4.0.)
#videojsskinschallenge
Googly eyes peeking over the frame, kids will love that. Smart niche too.
Thanks Denis 🙏 I really appreciate it!
Nice! hope you win!
Thanks Hassan☺️🤍
The googly eyes peeking over the frame are a perfect touch for a kids' player — and the day/night mode, with the eyes getting sleepy at night, turns a theme switch into a little story. The vertical 9:16 phone layout with thumb-friendly controls is smart too. If you have a...
Thanks! So glad the sleepy eyes came through! Going to check out Mahlin now👀
Designing for kids first is a smart niche, and the sleepy eyes in night mode turn a theme switch into a bedtime moment. Big friendly controls in 9:16 make total sense for how kids actually watch.
Thanks so much Andrei! ☺️ 🌙 Kids watch differently, so it felt right to design around that 🤍
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
A dark, glassmorphic Video.js v10 skin. The control bar is a frosted-glass strip that floats over the footage, so it stays legible over both bright and dark video. A violet-to-magenta gradient fills the progress bar and the scrubber glows, giving the seek line a "live" feel. The big play button is a deep violet circle. All five essential controls are present and keyboard-reachable with visible focus outlines, and the bar reflows cleanly from desktop down to a phone-width player. The video is hosted on Mux.🙌
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?
Waddle: a kid-proof video player for Video.js v10
I have three kids, and it's called a player, so I figured they should get to play a little. Kids' videos usually get a grown-up player with a new coat of paint. Waddle redesigns the controls themselves for kids 3 to 8.
Pick an egg and it hatches your guide: a penguin, a baby dinosaur or a sea turtle. That animal becomes the seek bar. It travels along its path as the video plays, reacts to everything you do, from pausing to muting to full screen, and belly-slides when you grab it. Kids can't read "1:05 / 2:30," so time is counted in snacks ("3 more fish!"), with the real time in small type for grown-ups. Finish a video and you earn a star for that animal.
The buttons are big and squishy, volume is a set of stairs, and speed and captions hide behind a press-and-hold grown-up corner so little fingers can't change them. Each animal is a theme pack on one shared player: same controls, new costume.
Everything works with a keyboard, focus is always visible, Escape closes the grown-up menu, and the animations calm down when reduced motion is on.
My kids were the testers. They loved it, and they found the hidden egg before I could show them. Hint: your guide doesn't like being poked. Try it five times.
Live: https://waddle-sepia.vercel.app
On my site: https://gavinblackman.vercel.app/waddle/
Mux playback ID: t02pEeTOixzExmXO003Z1yqfVyZtdrWCnVVEBjzUjMHXs
Film: "Caminandes 3: Llamigos" © Blender Foundation, Creative Commons Attribution license.
A player kids can actually play with, made by a dad of three. Love the thinking.