Embedding Youtube in a privacy friendly way

Showcases
1

Paul Irish did a nice thing. He created a lighter Youtube embed. His solution does no longer slow your website down, like normal Youtube embeds do. There is only one downside: it loads content from Youtube without consent, while Youtube is a service from a company that is known for tracking and profiling. This is not very privacy friendly.

The solution is to host the poster yourself and link it to Youtube. When you load the Hugo Lightbox the link will automatically get a class ‘lightbox-youtube’, which then can be styled. This looks like this:

[![](/uploads/youtube/Kh1c_N2VZPc.jpg)](https://www.youtube.com/watch?v=Kh1c_N2VZPc)

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

The end result is an instantly loading Youtube ‘embed’, that opens in lightbox. That means your user will view the video in a non-distractive way, without leaving your website. For a demo, look at the Viveon website.

Why this is better

This solution is better, because there is no initial cross domain request. This solution also ‘warns’ your user that he/she will be loading content from Youtube. This is done by showing the Youtube logo over the video. Just to be extra clear: nothing is loaded from Youtube until your visitory actually clicks on the play button. Clicking a play button on a Youtube marked video could be interpretted as ‘consent’. This is supported by the fact that links to external websites are also allowed by GDPR. In short: this solution is more privacy friendly.

Apart from being more privacy friendly, loading the poster image from your own server is also quicker: a win-win situation.

Note that my website does not use a CDN, as it is Dutch-only. Therefore it may load a little slow from your geographical location. It loads in under 0.2 seconds in the Netherlands, which you can verify by testing it with tools.pingdom.com from Frankfurt (Germany).

7 Likes
2

And here is a shortcode for that: shortcodes/youtube at main · dnb-org/shortcodes · GitHub

1 Like
3

For what? For the code of Paul?

4

Quite obviously for the code of Paul Irish :wink:

1 Like
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
6

Very nice Joost. Do I understand well that we need to download the poster images for each of the videos we want to load from Youtube?

1 Like
7

Yes, that is correct. Download or ‘screen grab’ your favourite still and put it on your own server/in your repository.

1 Like
8

Thank you very much for the shortcode. Works great.

9

I have created a simple shortcode that defers loading embed YouTube videos until user agrees to privacy policy. You can find it here: GitHub - rpapallas/hugo_gdpr_embeds: Hugo shortcodes for embedding YouTube videos with a warning/consent form.

4 Likes
10

@rpapallas Thanks for this code. With this, not only youtube but also Google Analytics is the way to ensure that the code does not run until you give permission.

1 Like
11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.