Embedding Youtube in a privacy friendly way

Showcases
5

Paul works for Google… you know that right? He does not care about the privacy of your visitors like we do or should. The business model of Google is based on gathering as much information on internet users as possible. That is no secret (and he will not deny that).

I have created the shortcode for the improved Youtube embed:

{{< youtube id="Kh1c_N2VZPc" image="/uploads/youtube/Kh1c_N2VZPc.jpg" >}}

The shortcode above prevents you from leaking data to Youtube (and is thus more compliant with European privacy laws). This means you have a lower risk of getting fined by the European authorities. This is very important. These fines are so high that your business will be bankrupt immediately. The shortcode is fully compatible with the lightbox at Hugo Codex, but also works standalone. I have created a demo for the standalone version on Codepen.

To use this shortcode just save the code below in your shortcodes folder and name it ‘youtube.html’:

<a class="shortcode-youtube" href="https://www.youtube.com/watch?v={{ .Get "id" }}" title="Play Youtube video" target="_blank">
    <img src="{{ .Get "image" }}" alt="Youtube video {{ .Get "id" }}" />
</a>

<style>
.shortcode-youtube {
    position: relative; display: inline-block;
}
.shortcode-youtube::before, .shortcode-youtube::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
} 
.shortcode-youtube::before {
    background: url(/img/youtube_button.svg) center center / auto 4rem no-repeat;
}
.shortcode-youtube:hover::before {
    background: url(/img/youtube_button_hover.svg) center center / auto 4rem no-repeat;
}
.shortcode-youtube::after {
    background: url(/img/youtube.svg) calc(100% - 1rem) calc(100% - 1rem) / auto 2rem no-repeat;
}
.shortcode-youtube img {
    display: block;
}
</style>

The images can be downloaded from:

Happy coding!

PS. I opened Davids Neighbours website in Firefox and saw that the Youtube shortcode he uses (the one from Paul Irish) shows no poster image at all. In other words: Pauls solution is not working cross-browser/in Firefox. This is because Firefox (and other privacy respecting browsers) block the image from loading. It looks broken and the console gives us a red error. The error reads:

Content Security Policy: The page’s settings blocked the loading of a resource at https://i.ytimg.com/vi/iFi0n_odlh8/hqdefault.jpg (“img-src”).

12 Likes