Embedding external content on a website in the current enshittocene period is more annoying than ever, so here is a copy-pasteable snippet to embed a youtube video while reducing its tracking and nuisance capabilities as much as possible:
<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>
credentiallessto load youtube in a blank disposable context, without access to the origin's network, cookies, and storage data.allowfullscreenbecause some people like itreferrerpolicyset to not leak your referersandboxto only allow javascript execution and SOP. Downloads, forms, modals, screen orientation, pointer lock, popups, presentation session, storage access and thus third-party cookies, top-navigation, … are all denied.allowwith every single directives set to "absolutely-fucking-not", and yes, they have to be all set one by one, and check regularly is new directive were added, because there is no deny-all in the spec. It seems that every browser has its own list of directives, chrome is using this one while firefox' prefers the MDN one, and of course the two differ. No doubt this was designed with privacy, simplicity, maintainability and security in mind.srcset towww.youtube-nocookie.cominstead ofyoutube.com. Both are official Google urls, but the former doesn't do tracking via cookies, and disables API and interaction and interaction logging. Amusingly, it's the player used onwhitehouse.gov.cspset tosandbox allow-scripts allow-same-origin;for compatibility's sake, just in case. I'd love to use a more restrictive policy, but the spec doesn't allow to provide one, except if the embedded website explicitly allows it, and of course youtube doesn't.loading="lazy"in case people don't scroll far enough to see the video, no need to make them do queries to Google for no reasons.
Don't forget to put a title for accessibility's sake.