I notice that there are notes next to the video which indicates the topics being discussed or explained at the time. These notes are clickable and functional. I think they are very useful and so I wonder if somebody could please explain to me how this is done? I'd appreciate it very much. thank you

Heya Gon! They're written by me, and you can actually see me writing them live on stream, e.g. for the latest Bitwise.

I'm writing in a markup called HMML (Handmade Markup Language), which gets processed by Cinera. The player (especially the markers with their internal clickable progress bars) was designed and programmed by @AsafG, with things like the menus (Quotes, References, Filter and Credits), keyboard navigation and the generator done by me.

The magical markers are each actually three div elements, and they basically work by using your mouse cursor's X-position within the main, full-width div to linearly interpolate between the timecode at the start and end of the marker in order to: a) Display different widths of the other two divs; and b) Jump the video to the correct time when you click. I think I've explained that correctly. As I say, this was all figured out by Asaf, and he'll be able to correct it if I got it wrong!

I made a thing to explain how the markers work: https://asafgartner.github.io/markers_demo/