Lite YouTube Embed

I was sad with lots of console warnings from embedded YouTube videos.

A cookie associated with a cross-site resource at http://youtube.com/ was set without the `SameSite` attribute.
A cookie associated with a cross-site resource at http://doubleclick.net/ was set without the `SameSite` attribute.
A cookie associated with a resource at http://doubleclick.net/ was set with `SameSite=None` but without `Secure`.

It also makes my already slow website even slower... Then I found lite-youtube-embed.

Made my page about 11s faster and use 3.6MB less resources.1

Standard Finish Standard Resources Lite Finish Lite Resources
11.51s 4.2MB 0.570s 616KB
11.69s 4.2MB 0.538s 616KB
11.50s 4.2MB 0.443s 616KB
11.94s 4.2MB 0.467s 616KB
12.09s 4.2MB 0.499s 616KB
11.68s 4.2MB 0.482s 616KB
12.13s 4.2MB 0.481s 616KB
11.50s 4.2MB 0.474s 616KB
11.72s 4.2MB 0.492s 616KB
11.64s 4.2MB 0.544s 616KB

I set up paulirish/lite-youtube-embed with following changes:

  • Reference video from www.youtube-nocookie.com2
  • Remove preconnect from doubleclick.net since we no longer needed
         if (LiteYTEmbed.preconnected) return;

         // The iframe document and most of its subresources come right off youtube.com
-        LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com');
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
         // The botguard script is fetched off from google.com
         LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');

-        // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
-        LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
-        LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
-
         LiteYTEmbed.preconnected = true;
     }

@@ -102,7 +98,7 @@
         const iframeHTML = `
 <iframe width="560" height="315" frameborder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
-  src="https://www.youtube.com/embed/${this.videoId}?autoplay=1"
+  src="https://www.youtube-nocookie.com/embed/${this.videoId}?autoplay=1"
 ></iframe>`;
         this.insertAdjacentHTML('beforeend', iframeHTML);
         this.classList.add('lyt-activated');

Don’t forget to update your Content Security Policy (child_src), so video from www.youtube-nocookie.com can be played.

Paul Irish also has a Pull Request that shows lite-youtube-embed would make loading YouTube embed 422X faster.

Thank you Paul Irish for making this gem!

  • 1

    Measured on incognito console with cache disabled, refresh on network tab. The page with Standard YouTube embed finished first around 2.25 seconds. But it fires up log events in a bit, so the real finish time is around 12s...

  • 2

    Reference from www.youtube-nocookie.com is called enhanced policy mode. YouTube won’t store information about visitors on our website unless they play the video. You can also get standard YouTube embedded iframe with this option checked or applied to your program.

Let me know for typos.