Copybook is a Video.js v10 skin for lesson videos. It treats the player as a page in a school exercise book: the video is taped onto squared paper beside a red margin, the seek bar is a wooden ruler, and captions are written on a highlighter strip under the picture instead of over it.

Every control sits on the paper below the video, so text and icons keep the same contrast over any footage. The ruler is divided by the video's chapters, numbered like centimetres, and finished parts turn green, so the seek bar doubles as lesson progress; hovering it shows a polaroid of that moment. The same chapters build a checklist outline next to the player.

Small details carry the idea through: a ruled title card before the lesson starts, hand-drawn icons, sticky notes that confirm shortcuts and double-taps, and a gold star when the lesson is finished. Buttons are at least 44px, every icon has a tooltip with its shortcut, focus is a thick pen-blue outline, and all motion switches off under reduced motion. Four colour themes (Classic, Kraft, Night and Chalkboard) are switched with one attribute, and each is checked for contrast.

I built it for the video tour of my own browser extension, AI Bookmarks and Notes, where it now runs live.

A wooden ruler as the seek bar and captions on a highlighter strip, so charming.