Rubenerd

You know the adage that the cobbler’s son walks barefoot? It describes the phenomena where the care and attention we accord our professional lives don’t always translate into our personal ones. Nowhere is this more obvious than the scripts I use to create this site, which are a mishmash of gaffer tape, outdated knowledge, and temporary fixes!

Wouter Groeneveld of the excellent Brain Baking site (RSS feeds here) asked me on Mastodon how I generate thumbnails with play buttons for external videos, instead of using iframes. I’m sure it’d be trivial to add this to my Hugo CMS install, but I farm this off to a shell script called video.sh that sits in my blog repo. It uses youtube-dl to download the video thumbnail, overlays a transparent PNG play button with ImageMagick, and spits out HTML with the correct srcset attribute for grainy and Retina/HiDPI displays.

(At some point I want to replace this with a more robust Perl script using PerlMagick, WWW:YouTube::Download, and Text::Template, so I can handle different image sizes and other niceties, but this has worked surprisingly well for the last few years).

Here’s a recent music example about Esther Golton:

My motivation for doing this was to remove external dependencies, tracking, and JavaScript from this site. It has the side effect of making my site faster and simpler, but the real reason was that I didn’t think it was ethical to force external sites onto people they didn’t opt-in to. Or you might only use certain sites at arms length, such as via a VPN or proxy to protect your privacy.

A video thumbnail is static, hosted locally here, and linked to an external site that you can open yourself in a new tab. It doesn’t have the instant gratification of inline playback, but then I think videos are best viewed on the target site at larger size anyway.