7 ms·

YouTube video embedding harm reduction

179 points by pabs3 3y ago

asddubs 3y ago
>and yes, they have to be all set one by one, because there is no deny-all in the spec. No doubt this spec was designed with end-users' privacy and security in mind. I can understand that, actually. deny all would be a forward compatibility nightmare
- Spivak 3y ago
  Why would it be a compatibility issue? Every time one gets added it will presumably be added to this list. In fact once you get your embed working with some set of directives you want to say "I will never need more than this, deny anything new."
  - yjftsjthsd-h 3y ago
    Because you implicitly rely on having something available and then a browser update means you no have access to it
  - arijun 3y ago
    Is it not possible that they decide to add something as configurable that is currently allowed everywhere? As an analogy, when Apple decided to make the ID of a user opt-in.
- troupo 3y ago
  It should be an allowlist, not a denylist, given how much there is. Here's the full (current) list just to show the sheer insanity of it: allow="accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; battery 'none'; browsing-topics 'none'; camera 'none'; display-capture 'none'; domain-agent 'none'; document-domain 'none'; encrypted-media 'none'; execution-while-not-rendered 'none'; execution-while-out-of-viewport ''; gamepad 'none'; geolocation 'none'; gyroscope 'none'; hid 'none'; identity-credentials-get 'none'; idle-detection 'none'; local-fonts 'none'; magnetometer 'none'; microphone 'none'; midi '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'; usb 'none'; window-management 'none'; xr-spatial-tracking 'none'",
  - asddubs 3y ago
    the problem comes when you decide to make a rule for something that was already possible before. let's say you have your deny-all set up becuase you want none of those. and then they add a rule for right clicking (just a silly example) and suddenly stuff breaks
    - troupo 3y ago
      Yes, it's a problem. That's why such lists must be deny all by default in the browser, and you only set allow lists for the stuff you want.
gryzzly 3y ago
Maybe a good place to mention Paul Irish’s lite-youtube-embed: "Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster." https://github.com/paulirish/lite-youtube-embed https://github.com/paulirish/lite-youtube-embed
xfalcox 3y ago
Adding a lazy, or going the extra mile of only loading a pure HTML div that is swapped by the iframe on click would be better to limit tracking. Do not load the iframe for people who don't want to play it.
- daemonologist 3y ago
  I noticed the FAA website[0] doing this a few days ago - pretty neat. (They use if-cdn/iframely[1] as an intermediary.) [0] https://www.faa.gov/uas/getting_started/remote_id https://www.faa.gov/uas/getting_started/remote_id [1] https://if-cdn.com/consents https://if-cdn.com/consents
troupo 3y ago
There's more to it. Youtube's own embed is by itself harmful just due to the sheer size of it - Google's own Lighthouse will mark youtube embeds as bad practices for many reasons. And will provide you with an article on how to replace the official Youtube embed with third-party libraries: https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/ https://developer.chrome.com/docs/lighthouse/performance/thi... - Google's own "Performance leader at Chrome" penned an article for web.dev where he mentions that you should use this other third-party library https://web.dev/articles/iframe-lazy-loading https://web.dev/articles/iframe-lazy-loading
- gryzzly 3y ago
  funny, right? imagine how hard it is to get on that team that spits out that garbage embed - you probably need to answer how many golf balls fit in a bus and such and sweat leetcode level hard and then dump 1,3mb on user where 1kb would suffice
redder23 3y ago
Is the allow thing like this really true? I was under the impression that everything is disallowed by default, and you specifically have to allow it to work, hence the default embeds from YouTube and others having it on there.
rchaud 3y ago
This is more work than it's worth, especially as the "no-cookie" domain could be deprecated or changed, leaving a bunch of broken embeds. The embed doesn't achieve anything from a UX standpoint other than showing a preview thumbnail. I'd rather copy the thumbnail image, add that to the post and use a good old anchor link to the actual video.
- rafram 3y ago
  youtube-nocookie.com is as official as youtube.com. See “Turn on privacy-enhanced mode” on this page: https://support.google.com/youtube/answer/171780 https://support.google.com/youtube/answer/171780
  - dijit 3y ago
    It's good that the owners of youtube are known for keeping things around, especially things that are slightly left of official. /s (Yes, I hate myself for making this comment, but it had to be said).
redder23 3y ago
There is a WordPress plugin that does some of these things and what lite-youtube-embed to all video embeds, no just YouTube. I own it I will communicate this to the author, and I am sure more of what is shown here will be added, I guess it's just to allow parameter and this insane list if it's really needed, still perplexed about this… https://nextgenthemes.com/ https://nextgenthemes.com/ The most importantly thing is just loading the thumbnail instead of the actual iframe on pageload. Loading=lazy is not really cutting it as the bloated iframe(s) just get loaded in on scroll. If you have multiple videos on a page or your visitors may not actually want to watch videos because they have already seen them ... loading=lazy is great for images but for iframe you need more than that. sandbox can be used to completely disable any left clicks inside embeds, so clicking on stuff will not open new browser tabs. That is incredibly useful to not let video hosts lure your site visitors away. Right click will still work but its good enough.
tills13 3y ago
Is Google still able to find these for rich results? We tried one of the other things mentioned in this thread (youtube-lite) recently and Google delisted all of our detected videos as it recrawled us. Sucks but you have to play their game.
redder23 3y ago
" src set to www.youtube-nocookie.com instead of youtube.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 on whitehouse.gov. " Is (was) actually UNTRUE. The no-cookies URL last time I checked it should be doing it now, but I am too lazy right now. This STILL set cookies when people engaged with the embed, it just prevented automatically setting cookies and tracking with that just by loading the iframe. Also, what about local-storage why in 2024 the talk is still about cookies? Local storage is the more modern API, and it seems many people fail to realize the all the stuff cookies do can be done with local storage and more.
deleted 3y ago
[deleted]
dspillett 3y ago
> and yes, they have to be all set one by one, because there is no deny-all in the spec. No doubt this spec was designed with end-users' privacy and security in mind. In fairness that spec was designed in a much more naive time, when open SMTP servers were commonplace, along with other things that would be a security red flag these days. Also, “designed” may be too generous a word. Back then (~96/97?) web related things were being thrown together on a whim.
- felixfbecker 3y ago
  The `allow` attribute on iframes is a relatively recent API addition from 2017 https://github.com/whatwg/html/pull/3287 https://github.com/whatwg/html/pull/3287
felixfbecker 3y ago
The main takeaway here should be to avoid YouTube embeds whenever possible. YouTube is way overused just to embed a video on a website. I'm baffled it's even commonplace on marketing homepages, why would you want YouTube's branding on your own brand's website? Just upload the video to GCS, S3 or Cloudflare and use the <video> tag. It's really simple. You can even add different resolutions/bitrates or formats or subtitles in different languages. Cloudflare can even do it automatically for you. But even a single dead simple MP4 works well for most use cases and still loads faster than the YouTube <iframe> player.
- neocritter 3y ago
  MP4 works fine, but different ways of creating/editing/preparing video all have different ideas about how to produce a video file, and the people operating them don't always have the technical background to even know there's a difference. YouTube offers a simple solution: drag any video file in any weird format to the upload modal, and you never have to think about it. https://blog.youtube/inside-youtube/new-era-video-infrastructure/ https://blog.youtube/inside-youtube/new-era-video-infrastruc... You're right that all the major video hosts offer it too, and I think GCS/AWS/Cloudflare all have APIs for it, but YouTube does it for free without requiring you to have any clue about all this stuff.
  - jimmaswell 3y ago
    Yeah, I've very recently had issues with mp4's only working on desktops/firefox/etc due to the wrong encoding or container or whatever not being supported. hvec vs mpeg-4 maybe? Had to mess with ffmpeg arguments multiple times to get it right. Meanwhile if you put it on youtube it will work 100% of the time.
  - felixfbecker 3y ago
    Fair, but in my view if you have engineers implementing your marketing homepage they should be able to do this for you just like they write the HTML and CSS for you and figure out the deployment. And if the marketing team uses Webflow or Framer or something like that, maybe those tools should add native support for dropping in videos without needing YouTube to make it equally simple, just like they make the rest of the development of the website simple.
catapart 3y ago
Lovely! Thank you!
taddgiles 3y ago
Yes, thank you! Great breakdown.
danpalmer 3y ago
> `credentialless` to load youtube in a blank disposable context, without access to the origin's network, cookies, and storage data. So it won't use my profile to load this ad-free with my subscription? Say what you want about premium subscriptions, but bypassing user preferences that mean they will see ads is not exactly a strong pushback against "enshittification". In fact, most of the details here are only harm reduction if you strongly believe that YouTube will do anything the browser can do to harm users. I see little evidence of this. Yes there are ads, I know people hate ads, I get that. But not allowing access to the camera? YouTube obviously isn't using the camera, what is that achieving? Pitching this as a generalised "hardened iframe" for untrusted content, sure! These are good things, and the allow spec should have a deny-all. But there's a lot of FUD in this with little to back it up for the case of YouTube, at least in my experience as a heavy user of the platform.
- animuchan 3y ago
  > YouTube obviously isn't using the camera, what is that achieving? Without auditing YT's code, it's not very obvious to me. But let's assume it doesn't; if/when it gets hacked, the injected malicious code might still want to use the camera.
- dspillett 3y ago
  > So it won't use my profile to load this ad-free with my subscription? Embedded players do not (currently) show adds, so no one would be losing that nicety using this method.
  - danpalmer 3y ago
    Fair point! I had thought I had seen ads in embedded players, but it might just have been spammy looking video thumbnails or something. Another commenter points out it also means no watch-later, which is perhaps a more concrete example of the same problem – being logged out is a worse experience here for many.
  - sorenjan 3y ago
    I've seen ads in embedded Youtube videos. https://support.google.com/youtube/answer/132596?hl=en https://support.google.com/youtube/answer/132596?hl=en
carlosjobim 3y ago
If you're embedding videos, why not use a service like Vimeo that is made specifically for this purpose?
- Player6225 3y ago
  For me, $12/month
- bogwog 3y ago
  It's nice that they have a free tier, but their pricing seems unattractive. Why use them when I could go with something like Bunny or Cloudflare that offer much better prices? Unless I'm misunderstanding something, Vimeo charges $20/month for what you could get on Bunny for $1/month.
- emmanueloga_ 3y ago
  I heard Bunny is good for this. -- https://bunny.net/stream/ https://bunny.net/stream/
- ThrowawayTestr 3y ago
  Please do, my Vimeo stock is worthless.

179 points by pabs3 3y ago

>and yes, they have to be all set one by one, because there is no deny-all in the spec. No doubt this spec was designed with end-users' privacy and security in mind. I can understand that, actually. deny all would be a forward compatibility nightmare

Spivak 3y ago
Why would it be a compatibility issue? Every time one gets added it will presumably be added to this list. In fact once you get your embed working with some set of directives you want to say "I will never need more than this, deny anything new."
- yjftsjthsd-h 3y ago
  Because you implicitly rely on having something available and then a browser update means you no have access to it
- arijun 3y ago
  Is it not possible that they decide to add something as configurable that is currently allowed everywhere? As an analogy, when Apple decided to make the ID of a user opt-in.
troupo 3y ago
It should be an allowlist, not a denylist, given how much there is. Here's the full (current) list just to show the sheer insanity of it: allow="accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; battery 'none'; browsing-topics 'none'; camera 'none'; display-capture 'none'; domain-agent 'none'; document-domain 'none'; encrypted-media 'none'; execution-while-not-rendered 'none'; execution-while-out-of-viewport ''; gamepad 'none'; geolocation 'none'; gyroscope 'none'; hid 'none'; identity-credentials-get 'none'; idle-detection 'none'; local-fonts 'none'; magnetometer 'none'; microphone 'none'; midi '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'; usb 'none'; window-management 'none'; xr-spatial-tracking 'none'",
- asddubs 3y ago
  the problem comes when you decide to make a rule for something that was already possible before. let's say you have your deny-all set up becuase you want none of those. and then they add a rule for right clicking (just a silly example) and suddenly stuff breaks
  - troupo 3y ago
    Yes, it's a problem. That's why such lists must be deny all by default in the browser, and you only set allow lists for the stuff you want.

gryzzly 3y ago

Maybe a good place to mention Paul Irish’s lite-youtube-embed: "Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster." https://github.com/paulirish/lite-youtube-embed https://github.com/paulirish/lite-youtube-embed

xfalcox 3y ago

Adding a lazy, or going the extra mile of only loading a pure HTML div that is swapped by the iframe on click would be better to limit tracking. Do not load the iframe for people who don't want to play it.

daemonologist 3y ago
I noticed the FAA website[0] doing this a few days ago - pretty neat. (They use if-cdn/iframely[1] as an intermediary.) [0] https://www.faa.gov/uas/getting_started/remote_id https://www.faa.gov/uas/getting_started/remote_id [1] https://if-cdn.com/consents https://if-cdn.com/consents

troupo 3y ago

There's more to it. Youtube's own embed is by itself harmful just due to the sheer size of it - Google's own Lighthouse will mark youtube embeds as bad practices for many reasons. And will provide you with an article on how to replace the official Youtube embed with third-party libraries: https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/ https://developer.chrome.com/docs/lighthouse/performance/thi... - Google's own "Performance leader at Chrome" penned an article for web.dev where he mentions that you should use this other third-party library https://web.dev/articles/iframe-lazy-loading https://web.dev/articles/iframe-lazy-loading

gryzzly 3y ago
funny, right? imagine how hard it is to get on that team that spits out that garbage embed - you probably need to answer how many golf balls fit in a bus and such and sweat leetcode level hard and then dump 1,3mb on user where 1kb would suffice

redder23 3y ago

Is the allow thing like this really true? I was under the impression that everything is disallowed by default, and you specifically have to allow it to work, hence the default embeds from YouTube and others having it on there.

rchaud 3y ago

This is more work than it's worth, especially as the "no-cookie" domain could be deprecated or changed, leaving a bunch of broken embeds. The embed doesn't achieve anything from a UX standpoint other than showing a preview thumbnail. I'd rather copy the thumbnail image, add that to the post and use a good old anchor link to the actual video.

rafram 3y ago
youtube-nocookie.com is as official as youtube.com. See “Turn on privacy-enhanced mode” on this page: https://support.google.com/youtube/answer/171780 https://support.google.com/youtube/answer/171780
- dijit 3y ago
  It's good that the owners of youtube are known for keeping things around, especially things that are slightly left of official. /s (Yes, I hate myself for making this comment, but it had to be said).

redder23 3y ago

There is a WordPress plugin that does some of these things and what lite-youtube-embed to all video embeds, no just YouTube. I own it I will communicate this to the author, and I am sure more of what is shown here will be added, I guess it's just to allow parameter and this insane list if it's really needed, still perplexed about this… https://nextgenthemes.com/ https://nextgenthemes.com/ The most importantly thing is just loading the thumbnail instead of the actual iframe on pageload. Loading=lazy is not really cutting it as the bloated iframe(s) just get loaded in on scroll. If you have multiple videos on a page or your visitors may not actually want to watch videos because they have already seen them ... loading=lazy is great for images but for iframe you need more than that. sandbox can be used to completely disable any left clicks inside embeds, so clicking on stuff will not open new browser tabs. That is incredibly useful to not let video hosts lure your site visitors away. Right click will still work but its good enough.

tills13 3y ago

Is Google still able to find these for rich results? We tried one of the other things mentioned in this thread (youtube-lite) recently and Google delisted all of our detected videos as it recrawled us. Sucks but you have to play their game.

redder23 3y ago

" src set to www.youtube-nocookie.com instead of youtube.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 on whitehouse.gov. " Is (was) actually UNTRUE. The no-cookies URL last time I checked it should be doing it now, but I am too lazy right now. This STILL set cookies when people engaged with the embed, it just prevented automatically setting cookies and tracking with that just by loading the iframe. Also, what about local-storage why in 2024 the talk is still about cookies? Local storage is the more modern API, and it seems many people fail to realize the all the stuff cookies do can be done with local storage and more.

deleted 3y ago

[deleted]

dspillett 3y ago

> and yes, they have to be all set one by one, because there is no deny-all in the spec. No doubt this spec was designed with end-users' privacy and security in mind. In fairness that spec was designed in a much more naive time, when open SMTP servers were commonplace, along with other things that would be a security red flag these days. Also, “designed” may be too generous a word. Back then (~96/97?) web related things were being thrown together on a whim.

felixfbecker 3y ago
The `allow` attribute on iframes is a relatively recent API addition from 2017 https://github.com/whatwg/html/pull/3287 https://github.com/whatwg/html/pull/3287

felixfbecker 3y ago

The main takeaway here should be to avoid YouTube embeds whenever possible. YouTube is way overused just to embed a video on a website. I'm baffled it's even commonplace on marketing homepages, why would you want YouTube's branding on your own brand's website? Just upload the video to GCS, S3 or Cloudflare and use the <video> tag. It's really simple. You can even add different resolutions/bitrates or formats or subtitles in different languages. Cloudflare can even do it automatically for you. But even a single dead simple MP4 works well for most use cases and still loads faster than the YouTube <iframe> player.

neocritter 3y ago
MP4 works fine, but different ways of creating/editing/preparing video all have different ideas about how to produce a video file, and the people operating them don't always have the technical background to even know there's a difference. YouTube offers a simple solution: drag any video file in any weird format to the upload modal, and you never have to think about it. https://blog.youtube/inside-youtube/new-era-video-infrastructure/ https://blog.youtube/inside-youtube/new-era-video-infrastruc... You're right that all the major video hosts offer it too, and I think GCS/AWS/Cloudflare all have APIs for it, but YouTube does it for free without requiring you to have any clue about all this stuff.
- jimmaswell 3y ago
  Yeah, I've very recently had issues with mp4's only working on desktops/firefox/etc due to the wrong encoding or container or whatever not being supported. hvec vs mpeg-4 maybe? Had to mess with ffmpeg arguments multiple times to get it right. Meanwhile if you put it on youtube it will work 100% of the time.
- felixfbecker 3y ago
  Fair, but in my view if you have engineers implementing your marketing homepage they should be able to do this for you just like they write the HTML and CSS for you and figure out the deployment. And if the marketing team uses Webflow or Framer or something like that, maybe those tools should add native support for dropping in videos without needing YouTube to make it equally simple, just like they make the rest of the development of the website simple.

catapart 3y ago

Lovely! Thank you!

taddgiles 3y ago

Yes, thank you! Great breakdown.

danpalmer 3y ago

> `credentialless` to load youtube in a blank disposable context, without access to the origin's network, cookies, and storage data. So it won't use my profile to load this ad-free with my subscription? Say what you want about premium subscriptions, but bypassing user preferences that mean they will see ads is not exactly a strong pushback against "enshittification". In fact, most of the details here are only harm reduction if you strongly believe that YouTube will do anything the browser can do to harm users. I see little evidence of this. Yes there are ads, I know people hate ads, I get that. But not allowing access to the camera? YouTube obviously isn't using the camera, what is that achieving? Pitching this as a generalised "hardened iframe" for untrusted content, sure! These are good things, and the allow spec should have a deny-all. But there's a lot of FUD in this with little to back it up for the case of YouTube, at least in my experience as a heavy user of the platform.

animuchan 3y ago
> YouTube obviously isn't using the camera, what is that achieving? Without auditing YT's code, it's not very obvious to me. But let's assume it doesn't; if/when it gets hacked, the injected malicious code might still want to use the camera.
dspillett 3y ago
> So it won't use my profile to load this ad-free with my subscription? Embedded players do not (currently) show adds, so no one would be losing that nicety using this method.
- danpalmer 3y ago
  Fair point! I had thought I had seen ads in embedded players, but it might just have been spammy looking video thumbnails or something. Another commenter points out it also means no watch-later, which is perhaps a more concrete example of the same problem – being logged out is a worse experience here for many.
- sorenjan 3y ago
  I've seen ads in embedded Youtube videos. https://support.google.com/youtube/answer/132596?hl=en https://support.google.com/youtube/answer/132596?hl=en

carlosjobim 3y ago

If you're embedding videos, why not use a service like Vimeo that is made specifically for this purpose?

Player6225 3y ago
For me, $12/month
bogwog 3y ago
It's nice that they have a free tier, but their pricing seems unattractive. Why use them when I could go with something like Bunny or Cloudflare that offer much better prices? Unless I'm misunderstanding something, Vimeo charges $20/month for what you could get on Bunny for $1/month.
emmanueloga_ 3y ago
I heard Bunny is good for this. -- https://bunny.net/stream/ https://bunny.net/stream/
ThrowawayTestr 3y ago
Please do, my Vimeo stock is worthless.