YouTube video embedding harm reduction

Wanted to start embedding YouTube videos on Eau de poisson instead of just linking over (in rare, specific cases where a video is central to the content).

On the other hand, letting Google track users through your site is not very nice (and the reason why we haven't been embedding until now).

There might be a way out: Julien over at Artificial truth wrote about YouTube video embedding harm reduction — ways to embed a video while leaking as little data as possible to Google.

Here's the golden snippet:

<!-- source: https://dustri.org/b/youtube-video-embedding-harm-reduction.html -->

<iframe
  credentialless
  allowfullscreen
  referrerpolicy="no-referrer"
  sandbox="allow-scripts allow-same-origin"
  allow="accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; battery 'none'; bluetooth 'none'; browsing-topics 'none'; camera 'none'; ch-ua 'none'; display-capture 'none'; domain-agent 'none'; document-domain 'none'; encrypted-media 'none'; execution-while-not-rendered 'none'; execution-while-out-of-viewport 'none'; gamepad 'none'; geolocation 'none'; gyroscope 'none'; hid 'none'; identity-credentials-get 'none'; idle-detection 'none'; keyboard-map 'none'; local-fonts 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; navigation-override 'none'; otp-credentials 'none'; payment 'none'; picture-in-picture 'none'; publickey-credentials-create 'none'; publickey-credentials-get 'none'; screen-wake-lock 'none'; serial 'none'; speaker-selection 'none'; sync-xhr 'none'; usb 'none'; web-share 'none'; window-management 'none'; xr-spatial-tracking 'none'"
  csp="sandbox allow-scripts allow-same-origin;"
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/jfKfPfyJRdk"
  title="lofi hip hop radio 📚 - beats to relax/study to"
  frameborder="0"
  loading="lazy"
></iframe>

The original post details each of the attributes — read it.

One thing I've changed in my own implementation¹ was adding a couple of query params from the YouTube IFrame Player API² to the source URL:

• rel=0: this used to remove the annoying "related videos" that YouTube pushes down its users' throats and which, frankly, have no place on embedded videos. Now, it only ensures that all "related videos" are from the same channel as the embedded video. Better than nothing, I guess.
• hl=fr: sets the player language to a ISO 639-1 code, fr in my case. It's a good idea to match the document's lang here.

Result: https://www.youtube-nocookie.com/embed/<video-id>?rel=0&hl=<lang>

Another possible improvement could be to nest the <frame> inside <details>. Since the frame is lazy loaded, requests would only go out to Google servers when users expand the details. The <summary> can then be used as a form of disclaimer/warning: "Open video in the YouTube player". But for most users, this only means an extra click — we decided against it.