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 from Chrome Dev Summit:

About 50ms faster and save 3.5MB resources.1
Connects from www.youtube-nocookie.com2.

I set up paulirish/lite-youtube-embed with doubleclick.net removed:

         // 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;
     }

Don’t forget to update your Content Security Policy (frame_src), so video from www.youtube-nocookie.com can be played, and img_src so preview images can be loaded.

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!

There is another project called lite-vimeo-embed which does the same but for Vimeo embeds.

  • 1

    Time by DOMContentLoaded, resources saved ~3.5MB for two embedded videos in a post.

  • 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.