There are times when I want to include a YouTube video in a post, but I’m not content with a regular link. YouTube
provides embeds for this purpose, but they use
Among other things, this payload tracks visitors on my site if they play a video embedded in one of my posts. I don’t
particularly like the idea of Google tracking people visitingmy website; if I wanted Google to have any
information about my visitors I’d run Google Analytics.
yttget: An Alternative to YouTube Embeds
Every video has an unique identifier, such as “o0W91FrTlYk”. This identifier represents the official video for “End of the
Beginning” by Black Sabbath. You can get the ID out of the URL for a particular video, which in this case
https://www.youtube.com/watch?v=o0W91FrTlYk. Once you have the ID, you can retrieve its associated
thumbnail, which currently lives at
If you’re on a Unix-like machine1, you can automate the process of extracting the ID from a given YouTube URL and fetching its thumbnail with a
reasonably small shell script. You can even have this script create HTML for displaying the thumbnail and pipe it to
your clipboard. I did that myself with a little script I call
yttget, for “YouTube Thumbnail GET”2. Here’s the code, sans license
It should run on any system that provides a POSIX-compliant shell, and requires
curl. Since I’m on a
Mac I use
pbcopy to pipe standard output into the system’s clipboard, but people using GNU/Linux or
BSD can easily replace it with
xsel. Hell, you could probably replace
wget if you wanted to, but I couldn’t be bothered.
Here’s how you use
yttget. (Don’t forget to replace the URL unless you really like Black Sabbath.)
- Navigate to the directory in which you want to place the thumbnail.
- Paste the resulting HTML into your editor.
The script generates HTML, particularly a
<picture> element wrapped inside a
<figure>. You should edit this to taste, especially if you don’t want to deal with generating WEBP and
AVIF files from JPEG images. You can paste it directly into a HTML or Markdown file. You can also use this with Org mode in GNU Emacs, but you’ll need to
wrap it in a
#+BEGIN_EXPORT html block. You should also add text inside the
<figcaption> for your readers’ benefit.
Once you do, it should look like something like this when rendered.
The link has
rel="noreferrer noopener nofollow" for security and SEO reasons. The first two,
mitigate exploits involving the JavaScipt function
window.open(). The use of
means that I’m not giving YouTube any “link juice”, which it shouldn’t need anyway because it’s user-generated
content and Google owns it.
You can grab a copy here. It’s available under the zero-clase BSD license.
Tools Used in
Extra: Generating Alternate Image Formats
If you want to use the
<picture> element to serve more modern image formats like WEBP and
AVIF, you’ll need to generate these formats from the JPEG you downloaded from YouTube. You can do this with ImageMagick, which provides
a suite of command-line image processing tools. The patch looks something like this:
You need not do your image conversion piecemeal, of course. If you have some experience in writing and editing makefiles and you’re using one to build and deploy your website, it’s easy to implement batch conversion. I did it myself when customizing the makefile in my copy of pblog.