Something that bugs me on the web is the way 3rd party trackers find their way around most websites, to creepily gather data about everyone. Static-site generation could pave the way for saner websites, however most people just use them to plant some Javascript snitch on everyone’s computer.
That’s precisely what we do when we call a Youtube/Twitter shortcode. We allow these evil multi-billion dollars corporations to spy on each and every one of our users. Because our mission as computer people is to enhance everyone’s freedom and privacy, let me introduce to you today my first attempt at a privacy-friendly Youtube shortcode.
How to set it up
You need a script to fetch the image associated with the Youtube video, generate a thumbnail and send it in base64 alongside its dimensions. I’m currently using a PHP script I wrote for this (very hacky work-in-progress), but you may use any sort of script to do that.
Then, my template generates an autonomous responsive video preview that does not contact Youtube on the client-side:
{{ $api := "http://noapi.lan" }}
{{ if eq (len .Params) 2 }}{{ .Scratch.Set "width" (.Get 1) }}{{ else }}{{ .Scratch.Set "width" "512" }}{{ end }}
{{ if eq (len .Params) 3 }}{{ .Scratch.Set "quality" (.Get 2) }}{{ else }}{{ .Scratch.Set "quality" "30" }}{{ end }}
{{ $width := .Scratch.Get "width" }}
{{ $quality := .Scratch.Get "quality" }}
{{ $id := .Get 0 }}
{{ $request := printf "%s/youtube/preview/%s/%s/%s" $api $id $width $quality }}
{{ $result := getJSON $request }}
{{ if eq $result.status "ok" }}
<div style="overflow: hidden;">
<style scoped="scoped">
div { background: url('data:image/jpeg;base64,{{ $result.content.image64 | safeCSS }}');
background-size: cover; background-repeat: no-repeat; text-align: center; box-shadow: inset 0 0 10px #000000; margin: 1rem auto;
width: 100%; max-height: {{ $result.content.previewDim.h }}px;
}
@media screen and (min-width: {{ $result.content.previewDim.w | safeCSS }}px) {
div { max-width: {{ $result.content.previewDim.w | safeCSS }}px; height: {{ $result.content.previewDim.h | safeCSS }}px; }
img { position: relative; top: 50%; transform: translateY(-50%); margin: auto auto; }
}
</style>
<a href="https://youtube.com/watch?v={{ $id }}"><img alt="Play video in a new tab" src="{{ "/images/widgets/play-btn.png" | relURL }}"></a>
</div>
{{ end }}
How to use it
Basic usage is backwards-compatible with the internal youtube
shortcode. Like so:
{{< youtube "0hIN3yS3owY" >}}
The shortcode also takes a second and third optional parameters for the thumbnail width, and the quality setting passed to ImageMagick for thumbnail generation.
So you may use it like that as well:
{{< youtube "uGo6z7oxTBg" 512 60 >}}
The future
For now my backend API’s interface is far from being standard, but if some more people are interested in developments like this, we could agree on following some standards such as ActivityStreams 2.0 (the “social” JSON standard) to describe the data, so that multiple backends can be switched transparently.