A couple of months ago, I received a couple of cryptic emails that I should check the usage of lite-youtube, the tiny fast web component that powers YouTube video embeds on this site and—before the emails—I presumed a few other sites. I generally don’t take random emails at their word but curiosity is a hell of a thing, so I resolved to look at a few more public areas to eyeball some numbers.

Turn out publicly outside random-o-emails, the component was getting some use:

1. Apparently between 30-40 million loads a month via the JSDeliver CDN. Unexpected.
2. Powers the embeds on Google’s web.dev site. The dep is in the infra package.json no less. Cool cool cool.
3. The NPM weekly downloads looked middling at best, a pedestrian 3,000 a week. The graph looked pretty though.

Having collected and seen enough data the usage is pessimistically in the 65-75M views a month range. Pretty good for a tiny 2.4KB speedy little web component that was a quick cut.

Given that kind of usage, I decided to tend the garden and try to firm up the repo to make sure I don’t break people trust or systems in the process. With the latest version—now at v1.3—I’ve added both foundation and features.

Playlist Loading Support

This was a feature on the list for a long time and I finally got around to adding this via the playlistid attribute. Note, you still must give a videoid as well, otherwise no thumbnail will load because playlists don’t serve a thumbnail (it’s a YouTube thing). On interaction with the component, the YouTube iframe will load the playlist interface.

Code Example:

<lite-youtube videoid="VLrYOji75Vc" playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"></lite-youtube>

Try it out (shout out to one of my favorite people, Tracy Lee):

Event Loading Support for YouTube JS API

While you could use the params attribute to enable the JS API, you still really needed to know when the iframe loaded otherwise it was more of a pain then it was worth. This is documented in YouTube API docs, but the component didn’t have a great way to deal with this.

To handle that, you can now listen for the liteYoutubeIframeLoaded custom event on the component, allowing further interaction via your the JS API or even just straight iframe postMessage.

<lite-youtube id="test-jsapi" videoid="guJLfqTFfIw" params="controls=0&enablejsapi=1" ></lite-youtube> <script> document.addEventListener('liteYoutubeIframeLoaded', () => { player = new YT.Player(document.querySelector('#test-jsapi').shadowRoot.querySelector('iframe'), { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }, false); </script>

A full example is available at: main/demo/jsapi.html

Image Placeholder Improvements

The image placeholder performs even better now, thanks to using the loading=lazy to image placeholder. You can further override that to eager via the posterloading attribute.

As requested by a few folks, the posterquality attribute can now be used to override the image based the YouTube Embed APIs available options (maxresdefault, sddefault, mqdefault, hqdefault).

No Cookie Support

The YouTube Embed API allows for using a special domain that prevents cookie tracking via youtube-nocookie.com. Now, if you add the nocookie attribute, the iframe will load with that domain instead.

Finally, tests

To help spot check and hold my sanity, I did finally add tests for the component which via web-test-runner.

Use It Now

While it’s still just a tiny web component my hope is that the uptick in use is an ongoing sign that people want faster and easier ways to work with on the web. As always, feel free to start using it today right now with little more than the JSDelivr CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.3.0/lite-youtube.js"></script>

Or install with your npm or yarns of the world (or bump your existing version in you package.json):

npm i @justinribeiro/lite-youtube # or yarn add @justinribeiro/lite-youtube

and import somewhere:

import '@justinribeiro/lite-youtube';

Happy coding!