diff options
Diffstat (limited to 'content/2023/this-site-no-longer-spies-for-youtube/index.md')
| -rw-r--r-- | content/2023/this-site-no-longer-spies-for-youtube/index.md | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/content/2023/this-site-no-longer-spies-for-youtube/index.md b/content/2023/this-site-no-longer-spies-for-youtube/index.md new file mode 100644 index 0000000..0d52aa2 --- /dev/null +++ b/content/2023/this-site-no-longer-spies-for-youtube/index.md @@ -0,0 +1,67 @@ +--- +title: "This Site No Longer Spies for Youtube" +category: "blog" +abstract: +date: 2023-02-02T14:58:42+01:00 +year: +draft: false +tags: [] +--- +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](http://localhost:1313/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? + +{{< imgproc "opportunities.png" Resize "500x" "Opportunities">}} + +{{< imgproc "diagnostics.png" Resize "500x" "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. + |