youtube: use lite-youtube-embed

[fonsp]

Hey!

There is a cool JS package called lite-youtube-embed, which is a super smart way to embed youtube videos: initially, it just shows the thumbnail and the youtube logo with two <img> tags, and when the user clicks, it loads the embed iframe and switches over. I believe it also uses the "IFrame Player API" under the hood.

This makes your page (notebook) load much faster (much less network and CPU usage), and it prevents google from tracking users through their youtube embed iframe. You can really notice the difference in loading times, because the default youtube iframe is quite heavy.

Their demo site: https://paulirish.github.io/lite-youtube-embed/

Another benefit is that lite-youtube-embed has a responsive embed: the thumbnail and iframe automatically resize to match the container width (i.e. Pluto cell), which is great for making your notebooks look nice across devices.

Notes:

• The import is from https://jsdelivr.com/, a very reliable CDN (also used in the Pluto HTML exports), and the import is version-pinned and it has a SHA integrity attribute for security.
• There is no need for the uuid1 ID anymore because lite-youtube-embed already supports multiple repeated videos. We also might not need the @memoize anymore, up to you :)
• In this PR I replaced the old implementation with the new one, but it could also be an argument to YouTube(...), or a new YouTubeLite struct. (But I believe that lite-youtube-embed is the right choice for almost users 😇)

Demo of this new functionality in Pluto:

youtube lite embed.zip

[hellemo]

Thanks for this contribution!

I actually considered using the thumbnails as images early on, the reason I went with embedded player is that I want to customize the preview image, and the only way I found to do that is to seek to that location in the video stream. The idea is to be able to use still images from the video in, say, a presentation, and then be able to play from there if you want.

So I would like to keep that functionality as is, but I'm open to add yours as an alternative, either as a separate type, or by passing an argument.

[fonsp]

Nice! Interesting use case, I didn't think of that!

How about making YouTube lite the default? I think most people would be happy with the default thumbnail, and in that case, the big performance increase and reduced tracking is really nice.

It could be something like:

YouTube("ljkfkwej2", 10, 53) # default, with youtube-lite

YouTube("ljrkj23jk", 10, 53; classic_embed=true) # uses the embedded by youtube

[hellemo]

I agree using the default thumbnail would probably be what people want and expect in many cases, but the original intent is also important for me.

Would it make sense to use the default thumbnail when there is no seek time defined, and only seek to the video location if specified?