Make Youtube Embeds GDPR compliant

[julieg18]

Currently, we use Youtube embeds for videos on the site. But Youtube is using cookies to track user's info. If we don't want to have to ask a user's permission to play Youtube videos, we'll need to find an alternative to youtube. Youtube does offer youtube-nocookie.com, but that just places tracking info in local storage and adds cookies once the user presses play.

cc @shcheklein @rogermparent

[rogermparent]

Vimeo immediately comes to mind, as their business model is based on paid memberships for the video hosting itself as oppose to collecting user data, and they have an embedded player parameter called dnt which "will block the player from tracking any session data, including all cookies and analytics."

The free Basic plan's primary limit to us is an upload space limit of 500mb per week and 5GB total. The cheapest paid plan, Plus, bumps that up to 5GB per week and 250GB per year (and assumedly unlimited total aside from that).

[rogermparent]

Dailymotion is another alternative that claims to be GDPR compliant, and they have a more generous free plan than Vimeo.

[julieg18]

We could definitely use a different video platform, but we would be forced to copy over any youtube videos we want to post on our website over to that platform. And we would less traffic on our youtube channel 🤔

Maybe we should consider turning our youtube embeds into links to youtube? We could use the youtube API and CSS to make it look like a video (allowing us to not have to update our website layouts), but when you click on it opens a new tab to youtube. @iterative/websites, what do you think?

[rogermparent]

We could definitely use a different video platform, but we would be forced to copy over any youtube videos we want to post on our website over to that platform. And we would less traffic on our youtube channel thinking

Agreed, would be a rough time to port all videos we want to embed as well as trying to enforce no youtube embeds throughout the site.

Maybe we should consider turning our youtube embeds into links to youtube? We could use the youtube API and CSS to make it look like a video (allowing us to not have to update our website layouts), but when you click on it opens a new tab to youtube.

I don't think this is quite what we'd want, I get the impression most people like to have the embeds within the site instead of bringing the user to another site which makes it more likely they'll bounce after.

Maybe we could re-tune our youtube-embeds such that the iframe src is not loaded until the user clicks a button? I found some inspiration from this article and threw together a little demo:

youtube-delayed-load-demo.mp4

We'll have to provide our own background image if we want one, but this method of loading ensures that the child iframe can't even load if we don't want it to, ensuring that no user info can be stored and we stay GDPR compliant while keeping videos embedded in the website.

PR created at #3136

[julieg18]

Maybe we could re-tune our youtube-embeds such that the iframe src is not loaded until the user clicks a button?

That would definitely be an improvement but I believe to be GDPR compliant, we would need to notify the user that clicking on the button sets trackers. If we want to keep youtube embeds on the site, maybe we could notify the user by showing a tooltip so the user wouldn't need to make extra clicks 🤔

[shcheklein]

Tooltip when I hover the play button?

One option to consider - open it the new window on the youtube domain?

[julieg18]

Tooltip when I hover the play button?

Yes! If we want to keep youtube embeds on our site, we would need to notify the user that clicking on the youtube video would add trackers to their browser. One way that came to mind was adding a tooltip when you hover over the play button, letting the user know that clicking play would add trackers, keeping things GDPR compliant.

One option to consider - open it the new window on the youtube domain?

Yes, I mentioned this option earlier! We can have the site open a link to youtube when a user clicks on the video. It keeps our site tracker free and we won't have to notify the user of anything :)

[shcheklein]

I think tooltip like that works. We would need to take care of the blog and docs for the embedded videos I think.

[julieg18]

I think tooltip like that works.

Sounds good! We'll need a design for the tooltip and as for the video background... We could keep it a dark screen (like in @rogermparent's example) , design a custom image, or even use the youtube api to fetch the the videos` thumbnail (though that method would add extra requests for the website).

We would need to take care of the blog and docs for the embedded videos I think.

I can think of a way to do this with the docs engine. As for the blog, it may need some kind of custom plugin 🤔

[yathomasi]

We can also have this option to remember the choice for next time 🤔 .

[julieg18]

Did some further research about using youtube-nocookie. Weirdly enough, I can't seem to find any official information from Google or Youtube about the local storage data that youtube-nocookie sets. All that Google says for sure in statements is that no cookies will be placed until a user presses play. But they don't mention local storage at all. As far as I can tell, they also never mention offically that youtube-nocookie is GDPR compliant, just stating that it helps with the cookies.

Looking outside of Google/Youtube, I'm reading mixed opinions. Some say that youtube-nocookie isn't GDPR compliant, most referring to this report by cookie bot (pg 6). Others say it is, but they never mention anything about local storage, possibly hinting they didn't know YouTube places anything in local storage 🤔

Personally, I don't think it's GDPR compliant. Even if the data that its setting in the local storage doesn't track anything from the user, we still need to let the user know that clicking on the youtube videos activates youtube's cookies :(

[shcheklein]

To be GDPR compatible (in a sense that you don't have to show the message) doesn't mean that you could not use cookies at all. It depends on how those cookies (and local storage) are being used. Google mentions briefly that they do not use them to personalize. We would need to check what do they actually do with them. May be we would need to check their privacy policy and terms of use.

Can we create a PR to research this a bit? It seems it would be beneficial anyway to switch to the nocookie domain.

[julieg18]

Can we create a PR to research this a bit?

Sure, I'll open an issue!

It seems it would be beneficial anyway to switch to the nocookie domain.

Agreed! I can update all the youtube urls by running a regex on our site and open a PR. But would we want some kind of tool that does this for us in the future or just check over future docs/blogs pages as they are created, making sure they are using the nocookie domain? Nevermind! Looks like gatsby-remark-embedder uses the nocookie automatically! All we need to do is use it in our Video component!

[julieg18]

Looked into and tested the gatsby-remark-embedder and it looks like we can add a custom transformer that overwrites the default youtube transformer, easily updating your blog and doc embeds!