Every online course treats every learner the same.

As a learner, this has bothered me for years. Half the time I sit through a detailed explanation of something I already understand, or I scrub through it blind, with no idea where it starts, where it ends, or where to jump to. The other half, I’m stuck on something and the extra explanation I need simply isn’t there.

I’ve built education products myself, a learning project for kids and a B2B training portal, and I’ve long wanted video that adjusts to the learner’s pace. The Video.js skins challenge was the push to work out what that looks like inside a player.

Fork is the result: a Video.js v10 skin for lessons that branch on your answers.

A checkpoint, not a quiz screen. The lesson pauses on a question. A right answer takes you on through a short confirmation; a wrong one opens “a closer look”, a 30-second explanation, and then returns you to the main line.

The timeline is a map. Lesson parts are stretches of line, checkpoints are stations, and a detour shows up only once you’ve taken it. At the end you see your whole route: score, time, and where you needed a closer look.

The transition is designed. After you answer, a card tells you why and where the route goes next, and waits for you instead of rushing on.

One video, many routes. Every part lives in one Mux video; branching is a seek. A course is a JSON file, so any video can become adaptive without touching the skin.

For the demo I created Frenchili, a fictional French school that doesn’t look like a typical e-learning platform. Its look comes from the French affiche, the street poster: tall condensed type, ink, cream and a slash of red, with cinematic frames of cafés and train platforms. The player isn’t dropped on top of that world, it’s designed as part of it. The controls, the checkpoint card and the route map share the school’s type, colours and hard-edged shapes, so the lesson and the player read as one poster. Every colour, size and font is a token, so another school can make the skin its own.

It’s built to be used, not just looked at. It works with the keyboard alone, focus is always visible, every state passes an axe-core audit, motion calms down for reduced-motion users, tap targets are 44 px on a phone, and checkpoints keep working in fullscreen on iPhone. It’s open source (Apache-2.0) and loads from a CDN, so it drops into Webflow or any page: a stylesheet, a script and the player markup.

Live site: https://frenchili.collabas.com Code: https://github.com/Peredelskiy/frenchili