Animated SVG animations (really just an svg element + animated css) are significantly smaller, more efficient, and crisper than equivalent GIF animations. I wrote about the difference between the two here: https://hackernoon.com/presenting-your-code-beautifully-fdba...
If you click on the example image to view it in a new tab, you can select the text there. It could be improved, afaict you can only select a single line of text at a time and if you select the current line being typed then the selection is cleared when that line is modified.
video codecs are not the right tool for this job. Consider subpixel-AA for fonts, partially transparent backgrounds, 4:4:4 instead of 4:2:0 and the ability to zoom as you mentioned.
Block artifacts are really annoying when you try to read something on screen recordings.
And svg texts can be made selectable when not loaded as images, so you could copy straight from the recording.
Editing the HTML attribute to width=2000% is pretty sweet however because it's a vector.
I'm guessing if the example wasn't in an image tag I could select the text too?