1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
---
title: "This Site No Longer Spies for Youtube"
categories:
- blog
abstract: Linking to YT in place of embeding is better for page load sped
date: 2023-02-02T14:58:42+01:00
year: 2023
draft: false
---
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](https://pagespeed.web.dev/report?url=https%3A%2F%2Fmichal.sapka.me%2F2023%2Fcradle-of-filth-her-ghost-in-the-fog%2F) to analyze the performance of [one of my recent posts](/2023/cradle-of-filth-her-ghost-in-the-fog/). 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?
{{< img-center "23-gsa-opportunities.png" "Opportunities">}}
{{< img-center "23-gsa-diagnostics.png" "Diagnostics">}}
Yeah. I embed YouTube videos, and even Google says it's a bad idea. What adds insult to injury is [Privacy Badger](https://privacybadger.org) 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](https://gohugo.io/), 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:
1. Find all files with youtube shortcodes in the content directory
2. Extract all ids by getting the first quoted text
3. grep for all quotations
4. remove quotes
5. get first words
Now, how do we get the thumbnail? Stack Overflow to [the rescue](https://stackoverflow.com/a/2068371). 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](https://imagemagick.org) 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:
1. convert the previously fetched cover,
2. by adding a play button,
3. the button is placed in the center of the cover,
4. the button is to be resized to 150x150 and moved by 5px to the right and bottom.
5. 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](https://www.youtube.com/@MacSociety):
{{<youtube "7G00r5dZIJY" "I Changed My Mind About Amiga - Amiga OS - Amiga One X5000 - the whole platform">}}
|
