Documentation Feedback

Change YoutubePlayer documentation to prevent multiple (unnecessary) load of the https://www.youtube.com/iframe_api

Affected documentation page: https://github.com/angular/components/blob/master/src/youtube-player/README.md

I have a use case where I potentially load the component containing the YoutubePlayer multiple times, and as such the documentation as written will re-add the script the to document body multiple times. It's also fairly easy to imagine another user who might have multiple videos displayed on the page in different components and re-load this script as a result of that.

I've solved this for my own use, however I feel that it would be wise and helpful to guide new implementers towards this as well.

One potential solution to this would be to recommend hardcode adding the script at a global level. However, it's possible that the developer may not have access to this (for whatever reason), and makes the implementation of this grow beyond the immediate component. This would also slow the initial load time of the app (slightly).

A better solution, I feel, would be to recommend checking against the document if the script already exists, and only adding it if it doesn't exist yet. ie:

  ngOnInit() {
    // This code loads the IFrame Player API code asynchronously, according to the instructions at
    // https://developers.google.com/youtube/iframe_api_reference#Getting_Started
    if (document && document.body && document.body.querySelector && !document.body.querySelector('script[src="https://www.youtube.com/iframe_api"]') {
      const tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      document.body.appendChild(tag);
    }
  }

Even better still, would be to encourage use of Angular/Common's Document Injection, rather than accessing the document directly. ie:

// example-module.ts
import {NgModule} from '@angular/core';
import {YouTubePlayerModule} from '@angular/youtube-player';
import { DOCUMENT } from '@angular/common';

@NgModule({
  imports: [
    YouTubePlayerModule,
  ],
  declarations: [YoutubePlayerExample],
})
export class YoutubePlayerExampleModule {
}

// example-component.ts
@Component({
  template: '<youtube-player videoId="PRQCAL_RMVo"></youtube-player>',
  selector: 'youtube-player-example',
})
class YoutubePlayerExample implements OnInit {
  constructor(
    @Inject(DOCUMENT) private document: Document,
  ) { }

  ngOnInit() {
    // This code loads the IFrame Player API code asynchronously, according to the instructions at
    // https://developers.google.com/youtube/iframe_api_reference#Getting_Started
    if (this.document && this.document.body && this.document.body.querySelector && !this.document.body.querySelector('script[src="https://www.youtube.com/iframe_api"]') {
      const tag = this.document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      this.document.body.appendChild(tag);
    }
  }
}

We could go on to encourage use of the ? existence check to simplify the if statement to

if (this.document?.body?.querySelector && !this.document.body.querySelector('script[src="https://www.youtube.com/iframe_api"]')

but I felt that it was best to recommend a TypeScript version agnostic change (while still encouraging defensive checking).

Thoughts/criticism/input is obviously more than welcome. I'm happy to make a PR for this if the proposed fix is viewed favourably/requested. Thanks for any consideration.