forked from angular/components
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(youtube-player): automatically load youtube api
Currently users have to load the YouTube API themselves which can be tricky to get right and be prone to race conditions. Since there's only one way to load it, these changes switch to doing so automatically. Loading the API automatically also enables us to optimize the component further in a follow-up PR by showing a placeholder image. If users don't want the API to be loaded automatically, they can disable it through an input or using the newly-introduced `YOUTUBE_PLAYER_CONFIG` injection token. Fixes angular#17037.
- Loading branch information
Showing
7 changed files
with
142 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,51 +1,60 @@ | ||
# Angular YouTube Player component | ||
|
||
This component provides a simple angular wrapper around the embed [YouTube player API](https://developers.google.com/youtube/iframe_api_reference). File any bugs against the [angular/components repo](https://github.com/angular/components/issues). | ||
This component provides a simple Angular wrapper around the | ||
[YouTube player API](https://developers.google.com/youtube/iframe_api_reference). | ||
File any bugs against the [angular/components repo](https://github.com/angular/components/issues). | ||
|
||
## Installation | ||
|
||
To install, run `npm install @angular/youtube-player`. | ||
|
||
## Usage | ||
|
||
Follow the following instructions for setting up the YouTube player component: | ||
|
||
- First, follow the [instructions for installing the API script](https://developers.google.com/youtube/iframe_api_reference#Getting_Started). | ||
- Then make sure the API is available before bootstrapping the YouTube Player component. | ||
- Provide the video id by extracting it from the video URL. | ||
Import the component either by adding the `YouTubePlayerModule` to your app or by importing | ||
`YouTubePlayer` into a standalone component. Then add the `<yotube-player videoId="<your ID>"` | ||
to your template. | ||
|
||
## Example | ||
|
||
If your video is found at https://www.youtube.com/watch?v=PRQCAL_RMVo, then your video id is `PRQCAL_RMVo`. | ||
If your video is found at https://www.youtube.com/watch?v=mVjYG9TSN88, then your video id is `mVjYG9TSN88`. | ||
|
||
```typescript | ||
// example-component.ts | ||
import {Component, OnInit} from '@angular/core'; | ||
import {Component} from '@angular/core'; | ||
import {YouTubePlayer} from '@angular/youtube-player'; | ||
|
||
let apiLoaded = false; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [YouTubePlayer], | ||
template: '<youtube-player videoId="PRQCAL_RMVo"></youtube-player>', | ||
template: '<youtube-player videoId="mVjYG9TSN88"/>', | ||
selector: 'youtube-player-example', | ||
}) | ||
class YoutubePlayerExample implements OnInit { | ||
ngOnInit() { | ||
if (!apiLoaded) { | ||
// This code loads the IFrame Player API code asynchronously, according to the instructions at | ||
// https://developers.google.com/youtube/iframe_api_reference#Getting_Started | ||
const tag = document.createElement('script'); | ||
tag.src = 'https://www.youtube.com/iframe_api'; | ||
document.body.appendChild(tag); | ||
apiLoaded = true; | ||
} | ||
} | ||
} | ||
export class YoutubePlayerExample {} | ||
``` | ||
|
||
## API reference | ||
Check out the [source](./youtube-player.ts) to read the API. | ||
|
||
## YouTube iframe API usage | ||
The `<youtube-player/>` component requires the YouTube `iframe` to work. If the API isn't loaded | ||
by the time the player is initialized, it'll load the API automatically from `https://www.youtube.com/iframe_api`. | ||
If you don't want it to be loaded, you can either control it on a per-component level using the | ||
`loadApi` input: | ||
|
||
```html | ||
<youtube-player videoId="mVjYG9TSN88" loadApi="false"/> | ||
``` | ||
|
||
## API | ||
Or at a global level using the `YOUTUBE_PLAYER_CONFIG` injection token: | ||
|
||
Check out the [source](./youtube-player.ts) to read the API. | ||
```typescript | ||
import {NgModule} from '@angular/core'; | ||
import {YouTubePlayer, YOUTUBE_PLAYER_CONFIG} from '@angular/youtube-player'; | ||
|
||
@NgModule({ | ||
imports: [YouTubePlayer], | ||
providers: [{ | ||
provide: YOUTUBE_PLAYER_CONFIG, | ||
useValue: { | ||
loadApi: false | ||
} | ||
}] | ||
}) | ||
export class YourApp {} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.