Inline links to videos with play buttons


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 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:

Play All The Room I Need

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.

Author bio and support


Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.