Types: Property 'ready' does not exist on type 'typeof YT'.

[bsastregx]

Hello. Thanks for this custom element.
I am adapting the javacript code to a lit component that uses typescript.
I have installed @types/youtube , and I am getting the following error:

Property 'ready' does not exist on type 'typeof YT'.

The error arises from this fragment:

  fetchYTPlayerApi() {
    if (window.YT || (window.YT && window.YT.Player)) return;

    this.ytApiPromise = new Promise((res, rej) => {
      const el = document.createElement('script');
      el.src = 'https://www.youtube.com/iframe_api';
      el.async = true;
      el.onload = (_) => {
        YT.ready(res);
      };
      el.onerror = rej;
      this.append(el);
    });
  }

I have looked up on the youtube type definition, and in fact, I don't find ready:
https://www.npmjs.com/package/@types/youtube?activeTab=code

Is maybe your code outdated?
Thanks in advance.

[paulirish]

Hmm interesting. Yeah i can't find a reference to this method in the official documentation: https://developers.google.com/youtube/iframe_api_reference

It looks like we want to use this onYouTubeIframeAPIReady global instead.

---

Ah.. okay we have the iframe_api script (just a loader). and then the widgetapi script that it loads.

When the widgetapi script loads and finishes its initial evaluation it has these lines:

First it calls back to yt_api and says "we're ready". That ends up calling any callbacks registered on YT.ready().

Right after that it calls the onYouTubeIframeAPIReady global if its defined.

(Note: flip needsYTApiForAutoplay to true to debug this on desktop)

---

The nice thing is that our current method plays well with having multiple embeds together on 1 page. A global complicates that.

But the downside is .. its using undocumented APIs.

Hmm... something to consider.

[paulirish]

TLDR: the script uses YT.ready() as a mechanism to resolve our ytApiPromise. However that's an undocumented API (not in docs and not in types).

We should use a window.onYouTubeIframeAPIReady global to get back on supported APIs.

But.. when we do that we'll have to ensure the system works with multiple embed that can technically race to fetch the iframe API. Will need a demo page with two embed that start loading at the same time.