This site now uses lazy-loading for the Youtube video embeds. Meaning, a preview image is loaded, and only when you click that is the actual video embed requested.
After posting a few Youtube videos to this site recently, I noticed this was loading a whole lot of quite large third-party resources. And this was happening without even playing a video – very likely resulting in visitors having to download a non-trivial amount of megabytes of no use. The site was slow to load. My Lighthouse score went way down.
So I fixed it.
To lazy load the videos I wrote a Jekyll plugin for a custom Liquid tag, that will take a Youtube video URL as parameter and spit out an
iframe tag that uses its
srcdoc attribute to at first only load the video’s preview image and display a “Play” button.