HOWTO: Lightweight YouTube embed without cookies

Developer help
1

Embedding YouTube videos without the initial IFRAME loading speeds up the page load, and enables the “Privacy Enhanced” method of embed. The IFRAME and html5 player from YT is loaded when the user clicks the thumbnail.

YouTube will drop 37 cookies when a visitor view a standard embedded YouTube video…

yt-37png
yt-37png1462×748 95.6 KB

With this script the player is loaded from youtube-nocookie.com domain.

Script & css by Amit Agarwal / labnol.org with some tweaks - js & css at the end of post.

yt-nocookie-iframe
yt-nocookie-iframe730×411 31.1 KB

  1. Save the javascript in your themes assets/js folder as light-yt.js

  2. Load it in your default.hbs theme HEAD

    {{!-- YouTube light embed: js--}}
    <script type="text/javascript" src="{{asset "js/light-yt.js"}}"></script>

  1. Add the CSS classes to main.css or any stylesheet loaded by your theme in assets/css

  2. Add the button displayed on the poster image to assets/images in your theme folder.
    Transparent PNG 179x179 yt-play-square.png 12.7 KB file on MEGA
    Here’s the PSD 65.9 KB file on MEGA

  3. To embed a YouTube video insert a HTML card in the post with the video ID, ex
    <div class="youtube-player" data-id="sXiRZhDEo8A"></div>

The button is referenced as background-image in the CSS so if you move it update…
background: url('../images/yt-play-square.png') no-repeat;

I modified the CSS to use aspect-ratio and made the placement of the play-button responsive by using transform: translate(-50%, -50%); Tested on mobile and desktop, it seems to work.

CSS and Javascript files…

1 Like
2

I looked into this some. youtube-nocookie.com is also owned by Google. It tracks using local storage instead of setting a cookie before the video starts playing, and according to this article also sets a cookie after the video starts playing, despite the name. Because no consent is collected for the tracking, it’s possible even the “no cookie” way embedding YouTube videos is also illegal in the EU unless careful steps are taken to collect consent for first.

3 Likes
3

Tested it in dev console on Edge and it does save yt-remote-device-id in local storage which is both disturbing and annoying. With GDPR’s focus on PII Personally Identifiable Information I’m wondering if they are able to triangulate the yt-remote-device-id against a Google User ID.

yt-edge-remote-storage-sessions
yt-edge-remote-storage-sessions800×237 65 KB

Verified that the remote-device-id is the same across different videos embedded from youtube-nocookie.com. This way they can track videos watched by an anonymous user on one device, but they are also sending the full URL of page where the video is embedded…

yt-payload
yt-payload1073×220 16.9 KB

Technically they are not storing a cookie, but they are storing device-id in local storage. Sneaky bastards. I’m using EFF Disconnect on Chrome so I didn’t see this at first, it blocks local storage, but this happens on Edge without the Disconnect-plugin.

yt-cookies-edge
yt-cookies-edge832×267 7.03 KB

1 Like
4

@mheland @markstos Did you find a more legally correct way to embed youtube videos?

5

I’m in the US and did not research this further.

I’m also not a lawyer or expert on EU privacy laws.

1 Like
6

Unlikely with any Google/Alphabet service - they pay for it and will not walk away without something in return. I’ve moved everything to Bunny Stream Bunny Stream | A better way to deliver online video | bunny.net

1 Like