This Site No Longer Spies for Youtube
This site no longer spies for google
Say what you will about Youtube; it is the de facto webpage for video content. Unfortunately, there is much to say, primarily negative, but more on this later. Today I want to make this blog a bit better.
Let’s use Google to analyze the performance of one of my recent posts. It’s terrible. Not as awful as it would have been if I used a lot of JS, but it is terrible, nevertheless.
Here are the findings. Notice a pattern?
Yeah. I embed YouTube videos, and even Google says it’s a bad idea. What adds insult to injury is Privacy Badger screaming at me on my own page. So yup, I have joined the botnet and spied for Google.
There are two solutions: pretend that YouTube doesn’t exist or fix it. Let’s fix it. The idea: use hyperlinks with self-hosted thumbnails. Sounds simple. And it is simple.
Step 1 - get all Youtube embeds. This site is powered by Hugo, and all three embeds are done via a youtube shortcode. So, on posts, I add a
<youtube "video_id" >
Let’s use GNU to get all video ids!
grep -r "<youtube" content/. | grep -o "\".*\"" | tr -d '"' | cut -d " " -f1
Easy. Just a few steps:
- Find all files with youtube shortcodes in the content directory
- Extract all ids by getting the first quoted text
- grep for all quotations
- remove quotes
- get first words
Now, how do we get the thumbnail? Stack Overflow to the rescue. We can fetch different sizes of thumbs directly from youtube. Let’s use wget
wget --output-document "assets/ytcovers/$id.jpg" "https://img.youtube.com/vi/$id/hqdefault.jpg"
And voila, we can use thumbs to create proper links. One thing that needs to be added is a play button. Internet and ImageMagick to the rescue! I found some random PNG overlay with a play button on the web, but I can’t find the URL. It was free for personal use, so yeah. W can easily compose the button over the thumb:
magick convert "assets/ytcovers/$id.jpg" "assets/partials/play-button.png" -gravity center -geometry 150x150+5+5 -composite "assets/ytcovers/$id.jpg"
So, we:
- convert the previously fetched cover,
- by adding a play button,
- the button is placed in the center of the cover,
- the button is to be resized to 150x150 and moved by 5px to the right and bottom.
- Lastly, we tell ImageMagick to compose those two and overwrite the cover
And with this simple trick, this site is no longer a part of the botnet, and as an added bonus, it is faster.
An example from TJ Ferreira:
