11 ms·

YouTube embeds are heavy and it’s fixable

400 points by surprisetalk 2y ago

ksec 2y ago
>TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube> Web Component is more like 100k, does share resources, and sacrifices no functionality. I would even go further and wonder why lite-youtube still requires 100K? And why they are not shared across different sites.
- nolok 2y ago
  > And why they are not shared across different sites. Cross site resources caching has been disabled in all major browsers for a few years now, because it was used for tracking.
- jsheard 2y ago
  The lite version still has to download the thumbnail, which is somewhere around 100-150k by itself for the 720p version. YouTube does provide smaller thumbnails you could use instead but with modern screen resolutions you probably want the big one.
  - cuu508 2y ago
    Does the 100K figure include thumbnail? Edit: I guess yes, the unminified JS file here is 10KB and much of it is code comments https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js https://github.com/paulirish/lite-youtube-embed/blob/master/...
- KMnO4 2y ago
  In a nutshell: You can track load time of your site. If (e.g.) NBC homepage has videos of X, Y, and Z on their homepage, you can simply embed those same videos on your site. Does your page take <0.1s to load? The cache was hit which means the user probably visited NBC recently. We can’t have nice things because people figure out how to use them to track people.
- dangus 2y ago
  > I would even go further and wonder why lite-youtube still requires 100K? Just turn off your computer and you’ll be using 0K.
omerhac 2y ago
[dead]
justsomehnguy 2y ago
> The Solution is to Replicate the Embed Experience Another Way. No, The Solution is to publicly shame Google Inc for wasting the resources. When it would be on WSJ and The Guardian front page then, maybe, you would see the result. Replacing the embed a one server/page is like pissing in the ocean - feels great, does nothing.
- coldtea 2y ago
  >When it would be on WSJ and The Guardian front page then, maybe, you would see the result Good luck with that. Not to mention WSJ and The Guardian themselves are babanas heavy for no good reason - like every other media site.
- haliskerbas 2y ago
  No one gets a promo for maintenance work. Especially at places like google.
  - stevekemp 2y ago
    "I saved XXTb of bandwidth with this one simple change!"
    - popcalc 2y ago
      Could be resume fodder.
- QuinnyPig 2y ago
  The front page of Hacker News remains one of the only effective places to file bug reports against Google products.
- zinekeller 2y ago
  > No, The Solution is to publicly shame Google Inc for wasting the resources. When a different part of Google publicly shames YT devs for this exact thing (https://web.dev/articles/embed-best-practices#use_click-to-load_to_enhance_facades https://web.dev/articles/embed-best-practices#use_click-to-l...), you know that there's little hope for change.
user070223 2y ago
User side solution click 2 load for ublock users(note that chrome is transitioning to manifest v3 and might not work) is the following thanks to yokoffing/filterlists https://raw.githubusercontent.com/yokoffing/filterlists/main/click2load.txt https://raw.githubusercontent.com/yokoffing/filterlists/main... (Betterfox creator, he has other useful filters on github) !||youtube-nocookie.com^$3p,frame,redirect=click2load.html,domain=~bing.com|~google.com|~duckduckgo.com|~video.search.yahoo.com ||youtube-nocookie.com/embed^$3p,frame,redirect=click2load.html,domain=~bing.com|~google.com|~duckduckgo.com|~video.search.yahoo.com ||youtube.com^$3p,frame,redirect=click2load.html,domain=~bing.com|~chatreplay.stream|~google.com|~duckduckgo.com|~video.search.yahoo.com
- schiffern 2y ago
  Click2load is an improvement, but embeds still suck. All I want is a plain link, so a while back I got fed up and wrote a short userscript to just rewrite the page. Works surprisingly well for how simple it is. // ==UserScript== // @name Youtube UnEmbed // @version 0.1 // @description Converts embedded Youtube iframes into links // @match *://*/* // @exclude *://*.youtube.com/* // @exclude *://*.reddit.com/* // @exclude *://looptube.io/* // @grant none // @run-at document-idle // ==/UserScript== (function() { 'use strict'; const SITE = "https://www.youtube.com"; //m.youtube Invidious etc const LINK_TO_TIMESTAMP = true; const SHOW_PREVIEW_IMAGE = false; const replaceEmbeds = () => { document.querySelectorAll('iframe').forEach((frame) => { const frameURL = frame.src || frame.dataset?.src; if (!frameURL) return; const match = frameURL.match(/(^https?:)?\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/([a-zA-Z0-9\-_]{11}).*?(\?.*((t|start)=([\dsmh]*)))?/i); if (match?.length == 9) { const newURL = SITE+"/watch?" + ((LINK_TO_TIMESTAMP && match[8]) ? "t="+match[8]+"&" : "") + "v="+match[4]; const elem = document.createElement("a") elem.href = newURL; if (SHOW_PREVIEW_IMAGE) { let img = document.createElement("img"); img.src = "https://i.ytimg.com/vi/"+match[4]+"/mqdefault.jpg"; img.alt="Preview image of Youtube video"; // 320 x 180 preview. For more resolution options see // https://medium.com/@viniciu_/how-to-get-the-default-thumbnail-url-for-a-youtube-video-b5497b3b6218 elem.appendChild(img); } else { elem.innerHTML = newURL; } frame.outerHTML = elem.outerHTML; // common lazyload hiding methods elem.style.display = "block !important"; elem.style.opacity = "100% !important"; elem.style.background = "transparent !important"; const parent = elem.parentElement; if (parent) { parent.style.display = "block !important"; parent.style.opacity = "100% !important"; parent.style.background = "transparent !important"; } } }); }; replaceEmbeds(); setInterval(replaceEmbeds, 3000); })();
fallingsquirrel 2y ago
<img src="thumbnail.png" onclick="[replace image with embed]">
- phh 2y ago
  And this has the extra benefit that you don't give your website data to Google for free
- xd1936 2y ago
  It looks like this solution is essentially this, but a little nicer looking (on hover animation, for example).
- est 2y ago
  yeah this is the reason I don't understand the "lite-youtube-embed" project. A simple one-liner would be much better.
ethanol 2y ago
Now we only need to force bloggers to stop using GitHub Gist embeds. Hugo (and probably other static site generators) has built-in support for code snippets with syntax highlighting, and more dynamic sites can rely on highlight.js which removes dependence on third-party services. It's just insane, using heavy iframes for small code snippets. https://gohugo.io/content-management/syntax-highlighting/ https://gohugo.io/content-management/syntax-highlighting/ https://highlightjs.org https://highlightjs.org
- withinboredom 2y ago
  I remember when I worked at Automattic and discovered that the gist's heart emoji was actually served by WordPress and not GitHub. They fixed it within a few weeks, but it was like that for years...
- arp242 2y ago
  > force bloggers to stop using GitHub Gist embeds Or maybe just let people do what they want on their own site, even though you or I might not like it? "Forcing" people to change their sites to suit your preferences is ridiculous.
difosfor 2y ago
Shouldn't class lty-playbtn be lyt-playbtn?
- paulirish 2y ago
  lol, yes. good eye. ;) https://github.com/paulirish/lite-youtube-embed/issues/65 https://github.com/paulirish/lite-youtube-embed/issues/65
IshKebab 2y ago
IMO YouTube embeds are a bad experience anyway, especially on mobile. Just put a poster image with a link to the actual YouTube video.
- mrkramer 2y ago
  On mobile you can tap "Watch on YouTube" and it will deep link and open the video inside your YouTube mobile app.
- schiffern 2y ago
  If your mobile browser can run userscripts I threw something together to rewrite Youtube embeds into links. Using the preview sounded cool so I added it. Change SHOW_PREVIEW_IMAGE to true. https://news.ycombinator.com/item?id=40898049 https://news.ycombinator.com/item?id=40898049
didgetmaster 2y ago
Get the climate change activists involved. How many of these videos have to play before the wasted electricity is equivalent to a car running for a year?
- phh 2y ago
  In my business area (ISP), when doing carbon accounting, we have "scope 3" which includes the electric consumption we incur the electric consumption of our devices at user's home. A first step towards reducing those externalities [1] is mandating that they power consumption Youtube incurs is accounted for. -- Another Youtube thing that made my computer screams is "theater mode", eating so much CPU for eye candy on so many devices ought to be at least declared. [1] To explain the externality: Google probably does that because they make maybe +0.5% revenues by click to video, at almost 0 cost for them. Since the whole extra cost is paid for by the user (by requiring a bigger computer, by consuming more electricity). The price for the user to view a page without the embed and with it can be something like +20% at no gain for them. It's so small than no sane user make those computations, but if you start accounting like a company, you would see the difference. (Plus obviously all the ecological externalities)
  - jacobgkau 2y ago
    > Another Youtube thing that made my computer screams is "theater mode", eating so much CPU for eye candy on so many devices ought to be at least declared. Do you mean ambient mode, that adds the faded light around the video (which looks awful, but is supposed to mimic behind-screen synced backlighting)? Theater mode mainly just makes the video bigger and moves other stuff lower down on the page, so I can't imagine how it "eats CPU" any more than simply making the window bigger would.
- jeffbee 2y ago
  This must be intentionally hyperbolic or you have no concept of how much energy is needed to run a car.
  - didgetmaster 2y ago
mmmmmbop 2y ago
The author says they don't believe that a lighter version has been shown to reduce engagement. I, on the other hand, fully believe that. The recommended lite-youtube-embed project page has a demo of both lite and regular players [0], and the lite version takes noticeably longer to start playing the video. Every additional millisecond of load time will reduce engagement, and here the difference is more on the order of hundreds of milliseconds or more. [0] https://paulirish.github.io/lite-youtube-embed/ https://paulirish.github.io/lite-youtube-embed/
- tantalor 2y ago
  Why is it slower? It feels same to me (Pixel phone)
  - maxloh 2y ago
    If I understand it correctly, the library displays a thumbnail and defers loading the YouTube embedded player iframe until you click on it, thus improving responsiveness (page load speed is not affected by its iframe however).
- nnf 2y ago
  I would much rather wait a few hundred milliseconds for a video to start during the few times I decide to watch an embedded video than to wait for the full video player to load every single time I visit a page with an embedded video that I'm never going to watch. Similarly, I would much rather have every stoplight I approach be green for me rather than having every light be red but for not very long.
  - vasco 2y ago
    These things are not optimized for what we prefer but for what leads us to behave in a way that maximizes a particular metric, for youtube it's global watch time.
    - Retric 2y ago
      Global watch time isn’t something non Google website owners care about. Remember, Google benefits from making the web worse.
II2II 2y ago
Tangent: I find tremendous irony in the video used as an example. It is for the remake of a game that is about problem solving and story telling, yet the remake requires vastly more resources than the original. Yes, there are reasons for the increased resource usage. On the other hand, there are reasons to use the more resource intensive version of the YouTube embed. I suppose the moral of the story is that software will grow to consume the resources available to it. Often, if not most of the time, there will be benefits to that increased resource usage. Yet that won't prevent people who prioritize factors like efficient resource usage from seeking alternatives they view as better.
pacifika 2y ago
A tiny script Click to toggle the display css attribute prevents it loading as the page loads
occz 2y ago
To put this into context, the player element might load 1.3 mb but loading a video can easily be in the range of 50 mb.
- masklinn 2y ago
  Which is only relevant if 100% of users load the video every time they hit the page. Because the 50M is paid by those who watch the video while the 1.3M is paid by everyone opening the page.
donatj 2y ago
I am not understanding how Bananas play into this? Is that a term for curly braces I am unfamiliar with or something with? Is code being "banana heavy" a term for code having a lot of scopes thus being bloated? I'm grasping at straws here.
- tedunangst 2y ago
  Bananas are crazy.
  - poikroequ 2y ago
    https://www.youtube.com/watch?v=BZ6Ev46i2to https://www.youtube.com/watch?v=BZ6Ev46i2to
- pseudalopex 2y ago
  Why not look it up? It means crazy.
  - donatj 2y ago
    I googled "bananas heavy" but I didn't get much
  - spencerchubb 2y ago
    Perfect use case for chatgpt or other llm
    - pseudalopex 2y ago
      Are you serious? It's the primary use for a dictionary. And did you try ChatGPT? It suggested bananas heavy meant bananas are physically heavy because they are ripe.
      - jondwillis 2y ago
        dictionaries do not provide much context that would un-confuse someone who has not come into contact with a colloquialism.
charrondev 2y ago
I work on a community forum platform and we detect YouTube embeds and replace them proxied thumbnails that don’t load until clicked. Just because one person in a thread shares a YouTube video doesn’t mean everyone else loading that page should have to download 1MB+ of YouTube’s JavaScript bloat and have their IPs tracked by google.
- mindhunter 2y ago
  Do you also cache or proxy the thumbnail? Google can also track them when hotlinking it.
  - tczMUFlmoNk 2y ago
    GP says "proxied thumbnails", so it sounds like yes.
- pier25 2y ago
  Is there a similar solution for SoundCloud? Their player is also super bloated.
  - diggan 2y ago
    You can basically do this with any embeds (granted they don't do a lot of global fuckery, which is a lot of them). Make sure the embed code gets evaluated within a function, then call that function when the user clicks on your "proxy" image. You might have to do a replace of the DOM elements as well, so the embed code gets what its expecting.
  - paulirish 2y ago
    There are a few "facade" solutions listed at https://developer.chrome.com/docs/lighthouse/performance/third-party-facades https://developer.chrome.com/docs/lighthouse/performance/thi... But.. AFAIK nobody has made one for Soundcloud.
- btouellette 2y ago
  I've got a site that is basically infinite scroll of mostly YouTube, SoundCloud, and Reddit embeds and had to do this for YouTube for it to even be functional. Using the YouTube provided thumbnails though since I'm not too concerned about tracking.
Aurornis 2y ago
> I don’t think we have any good answers here. In fact, I heard from a little birdie who ran it up the pole that they have tested lighter embeds and found them to reduce engagement. We’re clearly missing some huge part of the story. Obviously, faster load times should improve engagement. So if engagement went down with lighter embeds, that implies that some feature or functionality had to be sacrificed. Yet this blog post claims nothing is sacrificed. Something is missing from this story.
- qwery 2y ago
  > Obviously, faster load times should improve engagement. I don't think it's this clear-cut. People can have different levels of expectation and tolerance for loading times of different things, and the page (post/article/whatever) is a different thing to the video embedded in it. The load time of the rest of the page is also not necessarily limited by the loading time of the embed (depends what you're looking for). Arguably, the overall page load time will mask the content (embed) load time. Finally, and perhaps most importantly, the loading time of the embed is a different thing to the loading time of the video. The metric to look at may be click-to-playback lag.
- dceddia 2y ago
  I recall an article where Facebook or Uber or some other big tech co found something similar when they added some optimizations, and it turned out that it was being accessed by an entirely new market that couldn’t even load the page before. I wonder if it’s a similar thing here. Maybe the lighter embed is small enough that a huge swath of people is actually able to load a video now, but they bounce because playback is too slow on their device/connection. It would shows as a higher percentage of “person stopped watching video” instead of (nothing, because they never fully loaded the player).
  - kirubakaran 2y ago
    It was actually YouTube: https://blog.chriszacharias.com/page-weight-matters https://blog.chriszacharias.com/page-weight-matters
dangus 2y ago
My favorite part of the article: > They found, quite counterintuitively, that average page load times went up. But with a deeper look, they found that the lighter page was able to reach more people, including people on low-power low-internet-speed devices who were able to actually use YouTube for the first time, and them using it much more slowed those averages. That’s awesome! The speed of using the site was up relatively for everyone. The metric of the average page load speed was a red herring and ultimately not meaningful.
Havoc 2y ago
I'm seriously considering just setting up a service that downloads everything in my preferred channels overnight and re-serves it locally. It'll increase their cost and decrease their revenue but frankly I'm just getting fed up with their UX. It's just sooo fuckin bad I do wonder whether YT staff actually uses it. e.g. lately the thumbnails have a popup overlay that pops into existence at last second over the thumbnail, basically hijacks your click and navigates you away from yt and to a support.google.com page that discusses paid product placement. No google thats not why I clicked on a video thumbnail.
- Larrikin 2y ago
  How do you filter out what you actually want? There are no tools to sort through subscriptions that I know of. I am subscribed to some channels that put out tons of contents where I usually don't want to watch it, but the stuff that I do want to watch is high priority, channels where everything is priority, and channels where it's content I just want to watch occasionally when it happens to show up and I'm in the mood. I learned long ago that anything I want to watch more than once should be saved locally when a record label made a group I liked delete all their content to promote a new album, but I need a solution for filtering the one time views.
  - Havoc 2y ago
    >How do you filter out what you actually want? I wouldn't. Bulk download it all and decide locally. Not something I'd usually do because it is wasteful and not being a good net citizen but sufficiently annoyed that I'm willing to colour outside the lines here.
- l72 2y ago
  I previously used FreshRSS to follow youtube channels I was interested, but I've switched to Tube Archivist[1] + the Jellyfin Plugin [2]. Now my youtube channels are automatically downloaded to my server and I can watch them through Jellyfin, like any other show. I never have to deal with YouTube's terrible UX anymore. [1] https://www.tubearchivist.com/ [2] https://github.com/tubearchivist/tubearchivist-jf-plugin
demorilo 2y ago
What is the problem of sites hosting their own videos?
- Aachen 2y ago
  Tweakers.net mentioned in their podcast a few weeks back that they had this, but that people hated the player and it was a lot of work maintaining the back-end hosting thing. I don't understand what they need beyond Nginx with an FTP drive (or whatever WYSIWYG tool they also use for uploading images with the news article) and add `<video src=your.hls></video>` into the article. Browser does the rest of the work. In the Flash era this was different but that's been a while So I don't know the answer to our question either but according to them we're overlooking something
  - jacobgkau 2y ago
    How about needing to store your video in a variety of resolutions for users on different levels of connections (or have the CPU capacity available to transcode live for every single simultaneous viewer)? Also, streaming video requires higher bandwidth than text/images; where you may be able to get away with a single server for text/images, you might find a CDN (with the cost & complexity it brings) is more necessary for video delivery. The client-side player isn't an out-of-the-box thing, either-- solutions like Video.js and MediaElement.js need a myriad of plugins to approach the YouTube player's functionality, and default browser players get nowhere close. But it's the smaller part of the story, imo, because at least it's just JavaScript & CSS to deliver.
donohoe 2y ago
One way to help reduce overall weight of embeds (and improve the UX imho) is to block the ads - if you are able to leverage "Content Security Polices" on your pages. Example META tag: <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' *.your-cdn-if-any.com www.youtube.com *.googlevideo.com *.ytimg.com"> More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...
- 8organicbits 2y ago
  That's clever, well worth its own blog post.
  - swyx 2y ago
    can you tldr it? just one little meta tag defeats google's ad services? why dont we all slap it on our html templates?
    - DavidPiper 2y ago
      This seems to be allowing unsafe script injection from ONLY certain whitelisted urls, presumably excluding the url globs required for the ads. Haven't tested it, and not sure the full extent of pshc's sibling response either.
- pshc 2y ago
  PSA: Try not to chuck 'unsafe-inline' into your Content-Security-Policy thoughtlessly--it disables the anti-injection protections of CSP. There are safe ways to permit inline scripts, if you even need them. https://content-security-policy.com/ https://content-security-policy.com/
qwery 2y ago
On not believing the reduced engagement rumour and the suggested 'lite-youtube-embed'[0]: I am not surprised to hear that a different player will be treated differently by users. You just need it to look slightly different or behave slightly differently and it's completely alien and not to be trusted. The lite-youtube-embed as demoed (even with the title visible) doesn't let me click through to the actual youtube page. There's no link. It could even appear as a no-right-click-esque attempt to prevent me from going to the actual source of the "content" -- it's hostile. Of course, this specific feature could be added easily enough, but it points out a bigger issue. I almost never play embedded video, but when I do it might as well be the normal youtube experience. If you've wrapped it in what looks like yet another layer (for an unknown purpose), I'm going to be less likely to click on it. You're asking me to contend with youtube/google and another unknown entity. This article's "nothing sacrificed" is an example of the mistaken belief that developers know how their (or other) software is used by users. You don't and you can't. Not really. You're always guessing. To be clear, I also want less videos everywhere, less google in everything, less megabytes of javascript in everything, etc. Please stop embedding youtube videos everywhere, to vote for a better web. [0] https://paulirish.github.io/lite-youtube-embed/ https://paulirish.github.io/lite-youtube-embed/
- X-Cubed 2y ago
  Likewise, the Save to Watch Later button is also missing from lite-youtube-embed, which is a feature I use a lot. Yes, you can get to it by playing the video, but that defeats the point. I don't want to play the video, I don't want to wait for the video to load only to pause it and click the Save to Watch Later button.
- creatonez 2y ago
  Huh, even YouTube's official embed UI didn't make the "Watch on YouTube" button obvious enough for me to click on it, so I always hit play, paused the video, and clicked the "YouTube" button in the bottom right instead. Now that I'm aware of it, I wish it was in these lite players, though at least this one doesn't completely bar you from an easy way to get the link.
GuB-42 2y ago
[Ignore this, everything is ok now] For me the website is slow as to border on unusable. I have one core at 100% on Firefox 115 / Debian 11, I guess there is a busy loop somewhere in the JS. Works fine on Chrome(ium). I know it is usually frowned upon to comment on the website itself rather than the content, but considering the nature of the website, I think it is relevant. Edit: Looked in a bit more detail and it looks CSS-related, not JS-related as removing the main style sheet fixes the problem. It happens even in safe mode (no extensions). Possibly a Firefox bug (version is 115.12.0esr, from the Debian 11 repository), but it doesn't happen anywhere else. Edit2: Updated my system, rebooted, etc... it fixed the problem. So either I had something messed up with my system, or the author fixed it, anyway, everything is ok now.
- tambourine_man 2y ago
  I know it’s frowned upon and even in the guidelines, but I never understood why. This is Hacker News, the meta discussion on how a site works (or doesn’t) is as relevant and its content.
  - 8organicbits 2y ago
    I think HN is aiming for thoughtful and novel comments on the content of the article; complaints like "page loaded slowly" are shallow. The parent comment feels more on-point since the article is about optimizing websites and the post is itself a demo. I'm seeing <1% CPU on Firefox/Debian, but I have video autoplay turned off (I rarely want to watch them).
    - tambourine_man 2y ago
      Shallow comments are always bad, but a thorough examination on what’s triggering that infinite loop, if that’s really type case, would be great IMO, regardless of what the article is discussing in the first place.
- rolobio 2y ago
  The web is slowly becoming chrome only and I hate it. I recently had to switch to Chromium because Firefox simply did not work for the websites at my job.
jeffbee 2y ago
When I navigate to the test page[1] by the author of lite-embed, the standard variant transfers 82k. According to browser stats, the largest element "base.js" has been cached for several days. I imagine that the authors of YouTube who are undoubtedly as sensitive to the costs of transferring bytes as anyone have analyzed the problem with browser caches taken into account. https://paulirish.github.io/lite-youtube-embed/variants/yt.html https://paulirish.github.io/lite-youtube-embed/variants/yt.h...
divbzero 2y ago
> The weight also grows linearly with every embed—resources are not shared: two embeds weigh 2.4 MB; three embeds weigh 3.6 MB (you get the idea). Why aren’t these resources retrieved from cache? Shouldn’t the same-origin policy should allow for use of cached resources since they are all loading from www.youtube.com?
ZeljkoS 2y ago
Not mentioned in the article, one of the main reasons to ALWAYS do this is SEO. Regardless if users will play the video or not, web crawlers will not play the video and Google will penalize your SEO ranking if you use official Google's YouTube embed :D We implemented our own thumbnail image trick on TestDome homepage a few years ago (https://www.testdome.com/ https://www.testdome.com/). Thumbnail is from: https://img.youtube.com/vi/gPQQg4yZqt8/sddefault.jpg https://img.youtube.com/vi/gPQQg4yZqt8/sddefault.jpg
015a 2y ago
> If I were Team YouTube, I’d get loading="lazy" on there to help with performance right away. No need for videos that aren’t even visible on the page to load right away. This would hurt advertising impressions.
knallfrosch 2y ago
The page is broken on ios/safari with text size not set to 100% I don't usually care, but when you hand out advice to other sites and call your little text blog "Frontend-Masters", it better work.
deleted 2y ago
[deleted]
lulzury 2y ago
If you have a small site or just don't want any requests to Google for privacy reasons, consider just straight-up downloading the video and embedding it in a video tag. There are yt_dlp wrappers for most popular languages (even js). I'm pretty sure even embedding their poster thumbnail results in them getting your IP and other information so consider downloading that as well (from https://img.youtube.com/vi/[TAG]/hqdefault.jpg https://img.youtube.com/vi/[TAG]/hqdefault.jpg).
- sva_ 2y ago
  I feel like some content creators might not be very happy about that
- dmonitor 2y ago
  doing this on a broad scale is a great way to get sued
  - xigoi 2y ago
    So how about disallowing YouTube embeds and requiring users to upload videos?
  - griftrejection 2y ago
    In hostile jurisdictions, maybe. But there are servers all around the world. Take your pick.
    - swyx 2y ago
      username does not check out
userbinator 2y ago
Embedded videos could just be a <video> element pointing to the file on YouTube's servers (and I believe for a short time long ago this was actually possible), but clearly commercial interests got in the way.
- dewey 2y ago
  And now make it seekable, dynamically adapt bitrate, add subtitles, have clickable areas on the video and support all browsers and operating systems with various kinds of DRM and codecs and it’s not “just add a html tag” any more.
  - robertoandred 2y ago
    Seekability, bitrate adaptability, and subtitles are all built in to properly crafted video files. Codec support is handled with multiple source elements inside the video element. The YouTube player is, at its core, a video tag.
    - dewey 2y ago
      > The YouTube player is, at its core, a video tag. Nobody is disputing that. I'm disputing that "they could just use a video tag" to get the same functionality and I'm sure that anyone body working on a video player at any streaming service could instantly give you a list why it's not something that's only there for evil tracking or business reasons.
  - account42 2y ago
    It could be if browser vendors actually implemented that functionality for the video element. Shame that a certain large browser vendor has a slight conflict of interest problem with that. And just plain <video> elements are seekable just fine as long as the server supports good old HTTP range requests. Dynamic bitrate is an issue but as a desktop user I'd just set it to max anyway. Clickable arease are pure cancer - just put links below the video.
    - 2y ago
gwern 2y ago
OP: the YT loading paradox you are thinking of is https://blog.chriszacharias.com/page-weight-matters https://blog.chriszacharias.com/page-weight-matters
- dredmorbius 2y ago
  An absolute classic. Discussed a couple of years ago on HN: <https://news.ycombinator.com/item?id=32279897 https://news.ycombinator.com/item?id=32279897>
swyx 2y ago
i shared my solution here for anyone who wants an alternative to lite youtube embed (worked on it before knowing about paul's solution, has perhaps better tradeoffs with regards complete customizability) https://swyxkit.netlify.app/faster-youtube-embeds https://swyxkit.netlify.app/faster-youtube-embeds
- insin 2y ago
  I made a component for Astro sites which uses the <iframe srcdoc> solution. As a bonus you get a typed interface to the embed parameters when you need to use them: https://github.com/insin/astro-lazy-youtube-embed#readme https://github.com/insin/astro-lazy-youtube-embed#readme Example of a page with a dozen embedded videos: https://jbscript.dev/notes/undefined/the-banterbox https://jbscript.dev/notes/undefined/the-banterbox
leptons 2y ago
I spent a year creating a web template system that scores 100/100/100/100 on Google's Lighthouse test, with all kinds of dynamic content. Video backgrounds and embeds were a huge problem for us, but it can be solved. It's really pretty simple. Any video embed must be "below the fold", and the iframe must be lazy-loaded. Now our pages don't see any page speed hit from video embeds, they only get loaded when the page is scrolled and the video is in view. Any other solution that isn't lazy-loaded will still impact page speed, and if that's important to the client, then don't load anything that isn't absolutely necessary to display what appears "above the fold". For video backgrounds, our pages make a call to one of our APIs that gets the media URL from Youtube or Vimeo, and we then play that in a standard HTML 5 video player. It works great, and our Google Lighthouse score is above 95 even on pages with above-the-fold HD video that auto-plays. Loading a JS library from anywhere just to play a video is going to hurt page speed a bit no matter what.
system2 2y ago
Why would you not use YoutubeLite for this? Just thumbnail loading then embed / play on click. You are reinventing the wheel for no reason.
felixfbecker 2y ago
I continue to be baffled how many websites rely on YouTube embeds to show videos, especially marketing/brand websites where you don't usually want other unrelated logos on the page. It's really not that hard to self-host and embed videos, there has been native support since HTML5.
- knallfrosch 2y ago
  Until you miss audio, the playback isn't hardware accelerated and the phone gets hot, the video is broken, there's no thumbnail, you don't have access to a web dev and and and.. YouTube is so bland a brand I don't think it hurts anyone but the biggest companies.
Aardwolf 2y ago
What I wonder is why some youtube embeds don't allow full screen (while being very small in the website so hard to watch), if you press full screen it then says something like "this website doesn't allow you to watch this video full screen". But on youtube this same video works fullscreen. Are those websites themselves choosing that in a setting of their embed? But why? It actually makes me navigate away from your website as I go to youtube instead to find the video there to view it properly there.
- account42 2y ago
  > But why? To show their own ads next to the video?
- SushiHippie 2y ago
  https://developers.google.com/youtube/player_parameters#Parameters https://developers.google.com/youtube/player_parameters#Para... > fs > Setting this parameter to 0 prevents the fullscreen button from displaying in the player. The default value is 1, which causes the fullscreen button to display. So yes, these website chose to do this.
  - Aardwolf 2y ago
    Not sure if that's the one actually... it only says "disables the fullscreen button", it doesn't even specify whether it will actually prevent fullscreen through e.g. the 'f' shortcut Also, the kind of site I'm talking about has a fullscreen button visible, only when you press it it says it's disallowed But I see no other fullscreen related settings (other than the keyboard shortcut related one partially) so it could be this one of course but its description didn't catch up with reality
kevincox 2y ago
Back in the day I had a Firefox extension that would replace all YouTube embeds with a thumbnail that when clicked would just open YouTube. I originally wrote it because my phone didn't have flash and flash embeds were common. But it was nice to extend it to cover iframe embeds as well which were much faster and opening the embed in a full YouTube website or app was better UX than a tiny embed window in most cases. I never migrated it to a WebExtension after being annoyed that I wrote it to the new high-level extension API at the time that was supposed to be supported across browser versions. But this post makes me want to port it.
- v01d4lph4 2y ago
  Please do it!
  - kevincox 2y ago
    I'm unlikely to. But the Apache 2.0 source is here. Seems like it should still fairly easy to convert as all of the work happens in a content script. https://github.com/kevincox/youtube-e2l/ https://github.com/kevincox/youtube-e2l/
account42 2y ago
> The Solution is to Replicate the Embed Experience Another Way. No, the solution is to host your own videos and use a plain <video> element. Or it would be if Browser vendors would add native DASH/HLS-like adaptive streaming support to it, but even without that the user experience is much better with a <video>. > Or link it from a CDN Pure insanity.
p0w3n3d 2y ago
Lite YouTube Embed requires me to "start" the video twice - once click on embed, then another start on youtube loaded. However I'd like to see it fixed (if possible) because I find the lack of website load time optimization disturbing
ghostwords 2y ago
(I develop Privacy Badger.) Privacy Badger can replace YouTube embeds with "click to activate" placeholders. Faster browsing, better privacy, easy-to-use controls (when the replacement works properly ...). See "Pro tip #1" in https://www.eff.org/deeplinks/2024/01/privacy-badger-puts-you-control-widgets https://www.eff.org/deeplinks/2024/01/privacy-badger-puts-yo...

400 points by surprisetalk 2y ago

ksec 2y ago

>TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube> Web Component is more like 100k, does share resources, and sacrifices no functionality. I would even go further and wonder why lite-youtube still requires 100K? And why they are not shared across different sites.

nolok 2y ago
> And why they are not shared across different sites. Cross site resources caching has been disabled in all major browsers for a few years now, because it was used for tracking.
jsheard 2y ago
The lite version still has to download the thumbnail, which is somewhere around 100-150k by itself for the 720p version. YouTube does provide smaller thumbnails you could use instead but with modern screen resolutions you probably want the big one.
- cuu508 2y ago
  Does the 100K figure include thumbnail? Edit: I guess yes, the unminified JS file here is 10KB and much of it is code comments https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js https://github.com/paulirish/lite-youtube-embed/blob/master/...
KMnO4 2y ago
In a nutshell: You can track load time of your site. If (e.g.) NBC homepage has videos of X, Y, and Z on their homepage, you can simply embed those same videos on your site. Does your page take <0.1s to load? The cache was hit which means the user probably visited NBC recently. We can’t have nice things because people figure out how to use them to track people.
dangus 2y ago
> I would even go further and wonder why lite-youtube still requires 100K? Just turn off your computer and you’ll be using 0K.

omerhac 2y ago

[dead]

justsomehnguy 2y ago

> The Solution is to Replicate the Embed Experience Another Way. No, The Solution is to publicly shame Google Inc for wasting the resources. When it would be on WSJ and The Guardian front page then, maybe, you would see the result. Replacing the embed a one server/page is like pissing in the ocean - feels great, does nothing.

coldtea 2y ago
>When it would be on WSJ and The Guardian front page then, maybe, you would see the result Good luck with that. Not to mention WSJ and The Guardian themselves are babanas heavy for no good reason - like every other media site.
haliskerbas 2y ago
No one gets a promo for maintenance work. Especially at places like google.
- stevekemp 2y ago
  "I saved XXTb of bandwidth with this one simple change!"
  - popcalc 2y ago
    Could be resume fodder.
QuinnyPig 2y ago
The front page of Hacker News remains one of the only effective places to file bug reports against Google products.
zinekeller 2y ago
> No, The Solution is to publicly shame Google Inc for wasting the resources. When a different part of Google publicly shames YT devs for this exact thing (https://web.dev/articles/embed-best-practices#use_click-to-load_to_enhance_facades https://web.dev/articles/embed-best-practices#use_click-to-l...), you know that there's little hope for change.

user070223 2y ago

User side solution click 2 load for ublock users(note that chrome is transitioning to manifest v3 and might not work) is the following thanks to yokoffing/filterlists https://raw.githubusercontent.com/yokoffing/filterlists/main/click2load.txt https://raw.githubusercontent.com/yokoffing/filterlists/main... (Betterfox creator, he has other useful filters on github) !||youtube-nocookie.com^$3p,frame,redirect=click2load.html,domain=~bing.com|~google.com|~duckduckgo.com|~video.search.yahoo.com ||youtube-nocookie.com/embed^$3p,frame,redirect=click2load.html,domain=~bing.com|~google.com|~duckduckgo.com|~video.search.yahoo.com ||youtube.com^$3p,frame,redirect=click2load.html,domain=~bing.com|~chatreplay.stream|~google.com|~duckduckgo.com|~video.search.yahoo.com

schiffern 2y ago
Click2load is an improvement, but embeds still suck. All I want is a plain link, so a while back I got fed up and wrote a short userscript to just rewrite the page. Works surprisingly well for how simple it is. // ==UserScript== // @name Youtube UnEmbed // @version 0.1 // @description Converts embedded Youtube iframes into links // @match *://*/* // @exclude *://*.youtube.com/* // @exclude *://*.reddit.com/* // @exclude *://looptube.io/* // @grant none // @run-at document-idle // ==/UserScript== (function() { 'use strict'; const SITE = "https://www.youtube.com"; //m.youtube Invidious etc const LINK_TO_TIMESTAMP = true; const SHOW_PREVIEW_IMAGE = false; const replaceEmbeds = () => { document.querySelectorAll('iframe').forEach((frame) => { const frameURL = frame.src || frame.dataset?.src; if (!frameURL) return; const match = frameURL.match(/(^https?:)?\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/([a-zA-Z0-9\-_]{11}).*?(\?.*((t|start)=([\dsmh]*)))?/i); if (match?.length == 9) { const newURL = SITE+"/watch?" + ((LINK_TO_TIMESTAMP && match[8]) ? "t="+match[8]+"&" : "") + "v="+match[4]; const elem = document.createElement("a") elem.href = newURL; if (SHOW_PREVIEW_IMAGE) { let img = document.createElement("img"); img.src = "https://i.ytimg.com/vi/"+match[4]+"/mqdefault.jpg"; img.alt="Preview image of Youtube video"; // 320 x 180 preview. For more resolution options see // https://medium.com/@viniciu_/how-to-get-the-default-thumbnail-url-for-a-youtube-video-b5497b3b6218 elem.appendChild(img); } else { elem.innerHTML = newURL; } frame.outerHTML = elem.outerHTML; // common lazyload hiding methods elem.style.display = "block !important"; elem.style.opacity = "100% !important"; elem.style.background = "transparent !important"; const parent = elem.parentElement; if (parent) { parent.style.display = "block !important"; parent.style.opacity = "100% !important"; parent.style.background = "transparent !important"; } } }); }; replaceEmbeds(); setInterval(replaceEmbeds, 3000); })();

fallingsquirrel 2y ago

phh 2y ago
And this has the extra benefit that you don't give your website data to Google for free
xd1936 2y ago
It looks like this solution is essentially this, but a little nicer looking (on hover animation, for example).
est 2y ago
yeah this is the reason I don't understand the "lite-youtube-embed" project. A simple one-liner would be much better.

ethanol 2y ago

Now we only need to force bloggers to stop using GitHub Gist embeds. Hugo (and probably other static site generators) has built-in support for code snippets with syntax highlighting, and more dynamic sites can rely on highlight.js which removes dependence on third-party services. It's just insane, using heavy iframes for small code snippets. https://gohugo.io/content-management/syntax-highlighting/ https://gohugo.io/content-management/syntax-highlighting/ https://highlightjs.org https://highlightjs.org

withinboredom 2y ago
I remember when I worked at Automattic and discovered that the gist's heart emoji was actually served by WordPress and not GitHub. They fixed it within a few weeks, but it was like that for years...
arp242 2y ago
> force bloggers to stop using GitHub Gist embeds Or maybe just let people do what they want on their own site, even though you or I might not like it? "Forcing" people to change their sites to suit your preferences is ridiculous.

difosfor 2y ago

Shouldn't class lty-playbtn be lyt-playbtn?

paulirish 2y ago
lol, yes. good eye. ;) https://github.com/paulirish/lite-youtube-embed/issues/65 https://github.com/paulirish/lite-youtube-embed/issues/65

IshKebab 2y ago

IMO YouTube embeds are a bad experience anyway, especially on mobile. Just put a poster image with a link to the actual YouTube video.

mrkramer 2y ago
On mobile you can tap "Watch on YouTube" and it will deep link and open the video inside your YouTube mobile app.
schiffern 2y ago
If your mobile browser can run userscripts I threw something together to rewrite Youtube embeds into links. Using the preview sounded cool so I added it. Change SHOW_PREVIEW_IMAGE to true. https://news.ycombinator.com/item?id=40898049 https://news.ycombinator.com/item?id=40898049

didgetmaster 2y ago

Get the climate change activists involved. How many of these videos have to play before the wasted electricity is equivalent to a car running for a year?

phh 2y ago
In my business area (ISP), when doing carbon accounting, we have "scope 3" which includes the electric consumption we incur the electric consumption of our devices at user's home. A first step towards reducing those externalities [1] is mandating that they power consumption Youtube incurs is accounted for. -- Another Youtube thing that made my computer screams is "theater mode", eating so much CPU for eye candy on so many devices ought to be at least declared. [1] To explain the externality: Google probably does that because they make maybe +0.5% revenues by click to video, at almost 0 cost for them. Since the whole extra cost is paid for by the user (by requiring a bigger computer, by consuming more electricity). The price for the user to view a page without the embed and with it can be something like +20% at no gain for them. It's so small than no sane user make those computations, but if you start accounting like a company, you would see the difference. (Plus obviously all the ecological externalities)
- jacobgkau 2y ago
  > Another Youtube thing that made my computer screams is "theater mode", eating so much CPU for eye candy on so many devices ought to be at least declared. Do you mean ambient mode, that adds the faded light around the video (which looks awful, but is supposed to mimic behind-screen synced backlighting)? Theater mode mainly just makes the video bigger and moves other stuff lower down on the page, so I can't imagine how it "eats CPU" any more than simply making the window bigger would.
jeffbee 2y ago
This must be intentionally hyperbolic or you have no concept of how much energy is needed to run a car.
- didgetmaster 2y ago

mmmmmbop 2y ago

The author says they don't believe that a lighter version has been shown to reduce engagement. I, on the other hand, fully believe that. The recommended lite-youtube-embed project page has a demo of both lite and regular players [0], and the lite version takes noticeably longer to start playing the video. Every additional millisecond of load time will reduce engagement, and here the difference is more on the order of hundreds of milliseconds or more. [0] https://paulirish.github.io/lite-youtube-embed/ https://paulirish.github.io/lite-youtube-embed/

tantalor 2y ago
Why is it slower? It feels same to me (Pixel phone)
- maxloh 2y ago
  If I understand it correctly, the library displays a thumbnail and defers loading the YouTube embedded player iframe until you click on it, thus improving responsiveness (page load speed is not affected by its iframe however).
nnf 2y ago
I would much rather wait a few hundred milliseconds for a video to start during the few times I decide to watch an embedded video than to wait for the full video player to load every single time I visit a page with an embedded video that I'm never going to watch. Similarly, I would much rather have every stoplight I approach be green for me rather than having every light be red but for not very long.
- vasco 2y ago
  These things are not optimized for what we prefer but for what leads us to behave in a way that maximizes a particular metric, for youtube it's global watch time.
  - Retric 2y ago
    Global watch time isn’t something non Google website owners care about. Remember, Google benefits from making the web worse.

II2II 2y ago

Tangent: I find tremendous irony in the video used as an example. It is for the remake of a game that is about problem solving and story telling, yet the remake requires vastly more resources than the original. Yes, there are reasons for the increased resource usage. On the other hand, there are reasons to use the more resource intensive version of the YouTube embed. I suppose the moral of the story is that software will grow to consume the resources available to it. Often, if not most of the time, there will be benefits to that increased resource usage. Yet that won't prevent people who prioritize factors like efficient resource usage from seeking alternatives they view as better.

pacifika 2y ago

A tiny script Click to toggle the display css attribute prevents it loading as the page loads

occz 2y ago

To put this into context, the player element might load 1.3 mb but loading a video can easily be in the range of 50 mb.

masklinn 2y ago
Which is only relevant if 100% of users load the video every time they hit the page. Because the 50M is paid by those who watch the video while the 1.3M is paid by everyone opening the page.

donatj 2y ago

I am not understanding how Bananas play into this? Is that a term for curly braces I am unfamiliar with or something with? Is code being "banana heavy" a term for code having a lot of scopes thus being bloated? I'm grasping at straws here.

tedunangst 2y ago
Bananas are crazy.
- poikroequ 2y ago
  https://www.youtube.com/watch?v=BZ6Ev46i2to https://www.youtube.com/watch?v=BZ6Ev46i2to
pseudalopex 2y ago
Why not look it up? It means crazy.
- donatj 2y ago
  I googled "bananas heavy" but I didn't get much
- spencerchubb 2y ago
  Perfect use case for chatgpt or other llm
  - pseudalopex 2y ago
    Are you serious? It's the primary use for a dictionary. And did you try ChatGPT? It suggested bananas heavy meant bananas are physically heavy because they are ripe.
    - jondwillis 2y ago
      dictionaries do not provide much context that would un-confuse someone who has not come into contact with a colloquialism.

charrondev 2y ago

I work on a community forum platform and we detect YouTube embeds and replace them proxied thumbnails that don’t load until clicked. Just because one person in a thread shares a YouTube video doesn’t mean everyone else loading that page should have to download 1MB+ of YouTube’s JavaScript bloat and have their IPs tracked by google.

mindhunter 2y ago
Do you also cache or proxy the thumbnail? Google can also track them when hotlinking it.
- tczMUFlmoNk 2y ago
  GP says "proxied thumbnails", so it sounds like yes.
pier25 2y ago
Is there a similar solution for SoundCloud? Their player is also super bloated.
- diggan 2y ago
  You can basically do this with any embeds (granted they don't do a lot of global fuckery, which is a lot of them). Make sure the embed code gets evaluated within a function, then call that function when the user clicks on your "proxy" image. You might have to do a replace of the DOM elements as well, so the embed code gets what its expecting.
- paulirish 2y ago
  There are a few "facade" solutions listed at https://developer.chrome.com/docs/lighthouse/performance/third-party-facades https://developer.chrome.com/docs/lighthouse/performance/thi... But.. AFAIK nobody has made one for Soundcloud.
btouellette 2y ago
I've got a site that is basically infinite scroll of mostly YouTube, SoundCloud, and Reddit embeds and had to do this for YouTube for it to even be functional. Using the YouTube provided thumbnails though since I'm not too concerned about tracking.

Aurornis 2y ago

> I don’t think we have any good answers here. In fact, I heard from a little birdie who ran it up the pole that they have tested lighter embeds and found them to reduce engagement. We’re clearly missing some huge part of the story. Obviously, faster load times should improve engagement. So if engagement went down with lighter embeds, that implies that some feature or functionality had to be sacrificed. Yet this blog post claims nothing is sacrificed. Something is missing from this story.

qwery 2y ago
> Obviously, faster load times should improve engagement. I don't think it's this clear-cut. People can have different levels of expectation and tolerance for loading times of different things, and the page (post/article/whatever) is a different thing to the video embedded in it. The load time of the rest of the page is also not necessarily limited by the loading time of the embed (depends what you're looking for). Arguably, the overall page load time will mask the content (embed) load time. Finally, and perhaps most importantly, the loading time of the embed is a different thing to the loading time of the video. The metric to look at may be click-to-playback lag.
dceddia 2y ago
I recall an article where Facebook or Uber or some other big tech co found something similar when they added some optimizations, and it turned out that it was being accessed by an entirely new market that couldn’t even load the page before. I wonder if it’s a similar thing here. Maybe the lighter embed is small enough that a huge swath of people is actually able to load a video now, but they bounce because playback is too slow on their device/connection. It would shows as a higher percentage of “person stopped watching video” instead of (nothing, because they never fully loaded the player).
- kirubakaran 2y ago
  It was actually YouTube: https://blog.chriszacharias.com/page-weight-matters https://blog.chriszacharias.com/page-weight-matters

dangus 2y ago

My favorite part of the article: > They found, quite counterintuitively, that average page load times went up. But with a deeper look, they found that the lighter page was able to reach more people, including people on low-power low-internet-speed devices who were able to actually use YouTube for the first time, and them using it much more slowed those averages. That’s awesome! The speed of using the site was up relatively for everyone. The metric of the average page load speed was a red herring and ultimately not meaningful.

Havoc 2y ago

I'm seriously considering just setting up a service that downloads everything in my preferred channels overnight and re-serves it locally. It'll increase their cost and decrease their revenue but frankly I'm just getting fed up with their UX. It's just sooo fuckin bad I do wonder whether YT staff actually uses it. e.g. lately the thumbnails have a popup overlay that pops into existence at last second over the thumbnail, basically hijacks your click and navigates you away from yt and to a support.google.com page that discusses paid product placement. No google thats not why I clicked on a video thumbnail.

Larrikin 2y ago
How do you filter out what you actually want? There are no tools to sort through subscriptions that I know of. I am subscribed to some channels that put out tons of contents where I usually don't want to watch it, but the stuff that I do want to watch is high priority, channels where everything is priority, and channels where it's content I just want to watch occasionally when it happens to show up and I'm in the mood. I learned long ago that anything I want to watch more than once should be saved locally when a record label made a group I liked delete all their content to promote a new album, but I need a solution for filtering the one time views.
- Havoc 2y ago
  >How do you filter out what you actually want? I wouldn't. Bulk download it all and decide locally. Not something I'd usually do because it is wasteful and not being a good net citizen but sufficiently annoyed that I'm willing to colour outside the lines here.
l72 2y ago
I previously used FreshRSS to follow youtube channels I was interested, but I've switched to Tube Archivist[1] + the Jellyfin Plugin [2]. Now my youtube channels are automatically downloaded to my server and I can watch them through Jellyfin, like any other show. I never have to deal with YouTube's terrible UX anymore. [1] https://www.tubearchivist.com/ [2] https://github.com/tubearchivist/tubearchivist-jf-plugin

demorilo 2y ago

What is the problem of sites hosting their own videos?

Aachen 2y ago
Tweakers.net mentioned in their podcast a few weeks back that they had this, but that people hated the player and it was a lot of work maintaining the back-end hosting thing. I don't understand what they need beyond Nginx with an FTP drive (or whatever WYSIWYG tool they also use for uploading images with the news article) and add `<video src=your.hls></video>` into the article. Browser does the rest of the work. In the Flash era this was different but that's been a while So I don't know the answer to our question either but according to them we're overlooking something
- jacobgkau 2y ago
  How about needing to store your video in a variety of resolutions for users on different levels of connections (or have the CPU capacity available to transcode live for every single simultaneous viewer)? Also, streaming video requires higher bandwidth than text/images; where you may be able to get away with a single server for text/images, you might find a CDN (with the cost & complexity it brings) is more necessary for video delivery. The client-side player isn't an out-of-the-box thing, either-- solutions like Video.js and MediaElement.js need a myriad of plugins to approach the YouTube player's functionality, and default browser players get nowhere close. But it's the smaller part of the story, imo, because at least it's just JavaScript & CSS to deliver.

donohoe 2y ago

One way to help reduce overall weight of embeds (and improve the UX imho) is to block the ads - if you are able to leverage "Content Security Polices" on your pages. Example META tag: <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' *.your-cdn-if-any.com www.youtube.com *.googlevideo.com *.ytimg.com"> More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...

8organicbits 2y ago
That's clever, well worth its own blog post.
- swyx 2y ago
  can you tldr it? just one little meta tag defeats google's ad services? why dont we all slap it on our html templates?
  - DavidPiper 2y ago
    This seems to be allowing unsafe script injection from ONLY certain whitelisted urls, presumably excluding the url globs required for the ads. Haven't tested it, and not sure the full extent of pshc's sibling response either.
pshc 2y ago
PSA: Try not to chuck 'unsafe-inline' into your Content-Security-Policy thoughtlessly--it disables the anti-injection protections of CSP. There are safe ways to permit inline scripts, if you even need them. https://content-security-policy.com/ https://content-security-policy.com/

qwery 2y ago

On not believing the reduced engagement rumour and the suggested 'lite-youtube-embed'[0]: I am not surprised to hear that a different player will be treated differently by users. You just need it to look slightly different or behave slightly differently and it's completely alien and not to be trusted. The lite-youtube-embed as demoed (even with the title visible) doesn't let me click through to the actual youtube page. There's no link. It could even appear as a no-right-click-esque attempt to prevent me from going to the actual source of the "content" -- it's hostile. Of course, this specific feature could be added easily enough, but it points out a bigger issue. I almost never play embedded video, but when I do it might as well be the normal youtube experience. If you've wrapped it in what looks like yet another layer (for an unknown purpose), I'm going to be less likely to click on it. You're asking me to contend with youtube/google and another unknown entity. This article's "nothing sacrificed" is an example of the mistaken belief that developers know how their (or other) software is used by users. You don't and you can't. Not really. You're always guessing. To be clear, I also want less videos everywhere, less google in everything, less megabytes of javascript in everything, etc. Please stop embedding youtube videos everywhere, to vote for a better web. [0] https://paulirish.github.io/lite-youtube-embed/ https://paulirish.github.io/lite-youtube-embed/

X-Cubed 2y ago
Likewise, the Save to Watch Later button is also missing from lite-youtube-embed, which is a feature I use a lot. Yes, you can get to it by playing the video, but that defeats the point. I don't want to play the video, I don't want to wait for the video to load only to pause it and click the Save to Watch Later button.
creatonez 2y ago
Huh, even YouTube's official embed UI didn't make the "Watch on YouTube" button obvious enough for me to click on it, so I always hit play, paused the video, and clicked the "YouTube" button in the bottom right instead. Now that I'm aware of it, I wish it was in these lite players, though at least this one doesn't completely bar you from an easy way to get the link.

GuB-42 2y ago

[Ignore this, everything is ok now] For me the website is slow as to border on unusable. I have one core at 100% on Firefox 115 / Debian 11, I guess there is a busy loop somewhere in the JS. Works fine on Chrome(ium). I know it is usually frowned upon to comment on the website itself rather than the content, but considering the nature of the website, I think it is relevant. Edit: Looked in a bit more detail and it looks CSS-related, not JS-related as removing the main style sheet fixes the problem. It happens even in safe mode (no extensions). Possibly a Firefox bug (version is 115.12.0esr, from the Debian 11 repository), but it doesn't happen anywhere else. Edit2: Updated my system, rebooted, etc... it fixed the problem. So either I had something messed up with my system, or the author fixed it, anyway, everything is ok now.

tambourine_man 2y ago
I know it’s frowned upon and even in the guidelines, but I never understood why. This is Hacker News, the meta discussion on how a site works (or doesn’t) is as relevant and its content.
- 8organicbits 2y ago
  I think HN is aiming for thoughtful and novel comments on the content of the article; complaints like "page loaded slowly" are shallow. The parent comment feels more on-point since the article is about optimizing websites and the post is itself a demo. I'm seeing <1% CPU on Firefox/Debian, but I have video autoplay turned off (I rarely want to watch them).
  - tambourine_man 2y ago
    Shallow comments are always bad, but a thorough examination on what’s triggering that infinite loop, if that’s really type case, would be great IMO, regardless of what the article is discussing in the first place.
rolobio 2y ago
The web is slowly becoming chrome only and I hate it. I recently had to switch to Chromium because Firefox simply did not work for the websites at my job.

jeffbee 2y ago

When I navigate to the test page[1] by the author of lite-embed, the standard variant transfers 82k. According to browser stats, the largest element "base.js" has been cached for several days. I imagine that the authors of YouTube who are undoubtedly as sensitive to the costs of transferring bytes as anyone have analyzed the problem with browser caches taken into account. https://paulirish.github.io/lite-youtube-embed/variants/yt.html https://paulirish.github.io/lite-youtube-embed/variants/yt.h...

divbzero 2y ago

> The weight also grows linearly with every embed—resources are not shared: two embeds weigh 2.4 MB; three embeds weigh 3.6 MB (you get the idea). Why aren’t these resources retrieved from cache? Shouldn’t the same-origin policy should allow for use of cached resources since they are all loading from www.youtube.com?

ZeljkoS 2y ago

Not mentioned in the article, one of the main reasons to ALWAYS do this is SEO. Regardless if users will play the video or not, web crawlers will not play the video and Google will penalize your SEO ranking if you use official Google's YouTube embed :D We implemented our own thumbnail image trick on TestDome homepage a few years ago (https://www.testdome.com/ https://www.testdome.com/). Thumbnail is from: https://img.youtube.com/vi/gPQQg4yZqt8/sddefault.jpg https://img.youtube.com/vi/gPQQg4yZqt8/sddefault.jpg

015a 2y ago

> If I were Team YouTube, I’d get loading="lazy" on there to help with performance right away. No need for videos that aren’t even visible on the page to load right away. This would hurt advertising impressions.

knallfrosch 2y ago

The page is broken on ios/safari with text size not set to 100% I don't usually care, but when you hand out advice to other sites and call your little text blog "Frontend-Masters", it better work.

deleted 2y ago

[deleted]

lulzury 2y ago

If you have a small site or just don't want any requests to Google for privacy reasons, consider just straight-up downloading the video and embedding it in a video tag. There are yt_dlp wrappers for most popular languages (even js). I'm pretty sure even embedding their poster thumbnail results in them getting your IP and other information so consider downloading that as well (from https://img.youtube.com/vi/[TAG]/hqdefault.jpg https://img.youtube.com/vi/[TAG]/hqdefault.jpg).

sva_ 2y ago
I feel like some content creators might not be very happy about that
dmonitor 2y ago
doing this on a broad scale is a great way to get sued
- xigoi 2y ago
  So how about disallowing YouTube embeds and requiring users to upload videos?
- griftrejection 2y ago
  In hostile jurisdictions, maybe. But there are servers all around the world. Take your pick.
  - swyx 2y ago
    username does not check out

userbinator 2y ago

Embedded videos could just be a <video> element pointing to the file on YouTube's servers (and I believe for a short time long ago this was actually possible), but clearly commercial interests got in the way.

dewey 2y ago
And now make it seekable, dynamically adapt bitrate, add subtitles, have clickable areas on the video and support all browsers and operating systems with various kinds of DRM and codecs and it’s not “just add a html tag” any more.
- robertoandred 2y ago
  Seekability, bitrate adaptability, and subtitles are all built in to properly crafted video files. Codec support is handled with multiple source elements inside the video element. The YouTube player is, at its core, a video tag.
  - dewey 2y ago
    > The YouTube player is, at its core, a video tag. Nobody is disputing that. I'm disputing that "they could just use a video tag" to get the same functionality and I'm sure that anyone body working on a video player at any streaming service could instantly give you a list why it's not something that's only there for evil tracking or business reasons.
- account42 2y ago
  It could be if browser vendors actually implemented that functionality for the video element. Shame that a certain large browser vendor has a slight conflict of interest problem with that. And just plain <video> elements are seekable just fine as long as the server supports good old HTTP range requests. Dynamic bitrate is an issue but as a desktop user I'd just set it to max anyway. Clickable arease are pure cancer - just put links below the video.
  - 2y ago

gwern 2y ago

OP: the YT loading paradox you are thinking of is https://blog.chriszacharias.com/page-weight-matters https://blog.chriszacharias.com/page-weight-matters

dredmorbius 2y ago
An absolute classic. Discussed a couple of years ago on HN: <https://news.ycombinator.com/item?id=32279897 https://news.ycombinator.com/item?id=32279897>

swyx 2y ago

i shared my solution here for anyone who wants an alternative to lite youtube embed (worked on it before knowing about paul's solution, has perhaps better tradeoffs with regards complete customizability) https://swyxkit.netlify.app/faster-youtube-embeds https://swyxkit.netlify.app/faster-youtube-embeds

insin 2y ago
I made a component for Astro sites which uses the <iframe srcdoc> solution. As a bonus you get a typed interface to the embed parameters when you need to use them: https://github.com/insin/astro-lazy-youtube-embed#readme https://github.com/insin/astro-lazy-youtube-embed#readme Example of a page with a dozen embedded videos: https://jbscript.dev/notes/undefined/the-banterbox https://jbscript.dev/notes/undefined/the-banterbox

leptons 2y ago

I spent a year creating a web template system that scores 100/100/100/100 on Google's Lighthouse test, with all kinds of dynamic content. Video backgrounds and embeds were a huge problem for us, but it can be solved. It's really pretty simple. Any video embed must be "below the fold", and the iframe must be lazy-loaded. Now our pages don't see any page speed hit from video embeds, they only get loaded when the page is scrolled and the video is in view. Any other solution that isn't lazy-loaded will still impact page speed, and if that's important to the client, then don't load anything that isn't absolutely necessary to display what appears "above the fold". For video backgrounds, our pages make a call to one of our APIs that gets the media URL from Youtube or Vimeo, and we then play that in a standard HTML 5 video player. It works great, and our Google Lighthouse score is above 95 even on pages with above-the-fold HD video that auto-plays. Loading a JS library from anywhere just to play a video is going to hurt page speed a bit no matter what.

system2 2y ago

Why would you not use YoutubeLite for this? Just thumbnail loading then embed / play on click. You are reinventing the wheel for no reason.

felixfbecker 2y ago

I continue to be baffled how many websites rely on YouTube embeds to show videos, especially marketing/brand websites where you don't usually want other unrelated logos on the page. It's really not that hard to self-host and embed videos, there has been native support since HTML5.

knallfrosch 2y ago
Until you miss audio, the playback isn't hardware accelerated and the phone gets hot, the video is broken, there's no thumbnail, you don't have access to a web dev and and and.. YouTube is so bland a brand I don't think it hurts anyone but the biggest companies.

Aardwolf 2y ago

What I wonder is why some youtube embeds don't allow full screen (while being very small in the website so hard to watch), if you press full screen it then says something like "this website doesn't allow you to watch this video full screen". But on youtube this same video works fullscreen. Are those websites themselves choosing that in a setting of their embed? But why? It actually makes me navigate away from your website as I go to youtube instead to find the video there to view it properly there.

account42 2y ago
> But why? To show their own ads next to the video?
SushiHippie 2y ago
https://developers.google.com/youtube/player_parameters#Parameters https://developers.google.com/youtube/player_parameters#Para... > fs > Setting this parameter to 0 prevents the fullscreen button from displaying in the player. The default value is 1, which causes the fullscreen button to display. So yes, these website chose to do this.
- Aardwolf 2y ago
  Not sure if that's the one actually... it only says "disables the fullscreen button", it doesn't even specify whether it will actually prevent fullscreen through e.g. the 'f' shortcut Also, the kind of site I'm talking about has a fullscreen button visible, only when you press it it says it's disallowed But I see no other fullscreen related settings (other than the keyboard shortcut related one partially) so it could be this one of course but its description didn't catch up with reality

kevincox 2y ago

Back in the day I had a Firefox extension that would replace all YouTube embeds with a thumbnail that when clicked would just open YouTube. I originally wrote it because my phone didn't have flash and flash embeds were common. But it was nice to extend it to cover iframe embeds as well which were much faster and opening the embed in a full YouTube website or app was better UX than a tiny embed window in most cases. I never migrated it to a WebExtension after being annoyed that I wrote it to the new high-level extension API at the time that was supposed to be supported across browser versions. But this post makes me want to port it.

v01d4lph4 2y ago
Please do it!
- kevincox 2y ago
  I'm unlikely to. But the Apache 2.0 source is here. Seems like it should still fairly easy to convert as all of the work happens in a content script. https://github.com/kevincox/youtube-e2l/ https://github.com/kevincox/youtube-e2l/

account42 2y ago

> The Solution is to Replicate the Embed Experience Another Way. No, the solution is to host your own videos and use a plain <video> element. Or it would be if Browser vendors would add native DASH/HLS-like adaptive streaming support to it, but even without that the user experience is much better with a <video>. > Or link it from a CDN Pure insanity.

p0w3n3d 2y ago

Lite YouTube Embed requires me to "start" the video twice - once click on embed, then another start on youtube loaded. However I'd like to see it fixed (if possible) because I find the lack of website load time optimization disturbing

ghostwords 2y ago

(I develop Privacy Badger.) Privacy Badger can replace YouTube embeds with "click to activate" placeholders. Faster browsing, better privacy, easy-to-use controls (when the replacement works properly ...). See "Pro tip #1" in https://www.eff.org/deeplinks/2024/01/privacy-badger-puts-you-control-widgets https://www.eff.org/deeplinks/2024/01/privacy-badger-puts-yo...