docs(youtube-player): update loading example to avoid loading API multiple times

[crisbeto]

Adds some extra logic to the asynchronous loading example that illustrates how to avoid adding the API multiple times.

[mbtestfeed]

Hi @crisbeto . Thanks for doing this. I was planning to get to this PR, then work picked up a lot (still pretty busy but I had a chance to come see if anything had happened here!)

I'm slightly concerned that unless I'm missing something, this doesn't actually seem to fix #20644 or point the implementer in the right direction.
With this implementation it will stop this instance of the component from reloading the script. But if someone has multiple instances of the component on a page, or has this component in a modal that they open and close and re-open then the scope of apiLoaded won't be visible to the other instances of the component. Because of that confined scope we'll still be adding multiple instances of the script to the document body.

I think you're right in terms of cleaning up the example (my proposed solution definitely had a bit of code smell...) - but perhaps where we initiate the variable a comment of // ideally apiLoaded would be a get function that checks the document body for the script and returns a boolean or similar would be beneficial?

I dunno. Maybe as-is is enough. Would be curious to hear your thoughts.

[crisbeto]

@mbtestfeed the scope in which we have the apiLoaded variable is available to all instance of the YouTube player, even if they've been added at a later point.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}