The new Angular YouTube Player component!
Tags: javascript, angular, youtube, components
Published: 2019-11-02 22:36:51

##Easily embed YouTube videos in your Angular applications!

## TL;DR; —
There’s a cool new component in the Angular world 🌎! It makes it easier than ever before to add YouTube videos to your Angular applications. Install it today and try it out:

    npm i @angular/youtube-player

To find out more details about it, and learn about the full API, read on! 📚

---

## The Angular YouTube Player component 🎉:

One of the big exciting recent changes to Angular (other than [Ivy](https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf)), is the rename of the **`angular/material`** repository to [**`angular/component`**](https://github.com/angular/components) ✨. This rename is meant to capture the fact that the repository is for so much more than only the [Angular Material](https://material.angular.io/) library! The Angular Components repository already also contains the [Angular Component Dev Kit](https://material.angular.io/cdk/categories), and it is going to be the place where new, high-quality Angular components are built and shared with the community. With the release of the first release candidate of Angular v9, we get our first look at these new components!
One of these brand new components is the [**`@angular/youtube-player`**](https://www.npmjs.com/package/@angular/youtube-player). This component is a thin wrapper around the [embed Youtube player API](https://developers.google.com/youtube/iframe_api_reference). Let’s check out what it looks like:

{% stackblitz angular-youtube-player-example %}

Documentation is a bit thin on the ground right now, so let’s dig into the code and see how this thing works! First, we need to import and include **`YouTubePlayerModule`**:

{% gist https://gist.github.com/phenomnomnominal/fbb0c315305315b36834bdbcb77df383 %}

This gives us access to the **`<youtube-player>`** component!

{% gist https://gist.github.com/phenomnomnominal/c860fb76f51ca12a628eca05a7fa5f18 %}

Pretty straightforward!


## The Angular YouTube Player API:

Unfortunately documentation for the full API hasn’t written yet. Luckily, we can check out [the source code for the component](https://github.com/angular/components/blob/master/src/youtube-player/youtube-player.ts) and see what we find…

> ## ⚠️ Warning! ⚠️ 
> #### The YouTube Player component is still pre-release, so this API could change!

### Inputs:

- **`[videoId]: string`** — YouTube Video ID to render. It’s the little hash at the end of the YouTube URL. For example, if your video is found at https://www.youtube.com/watch?v=moSFlvxnbgk, then your videoId is moSFlvxnbgk.
- **`[height]: number`** — height of video player
- **`[width]: number`** — width of video player
- **`[startSeconds]: number`** — the moment when the player is supposed to start playing
- **`[endSeconds]: number`** — the moment when the player is supposed to stop playing
- **`[suggestedQuality]: SuggestedQuality`** — the [suggested quality](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L409) of the player. This can take the values `'default'` , `'small'`, `'medium'`, `'large'`, `'hd720'`, `'hd1080'`, and `'highres'`
- **`[showBeforeIframeApiLoads]: boolean`** — whether the `iframe` will attempt to load regardless of the status of the API on the page. Set this to true if you don’t want the `onYouTubeIframeAPIReady` field to be set on the global `window`

### Outputs:

Each output maps to the [events fired from the YouTube JS API](https://developers.google.com/youtube/iframe_api_reference#Events).

- **`(ready): PlayerEvent`** — [fires](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L308) whenever a player has finished loading and is ready to begin receiving API calls.
- **`(stateChange): OnStateChangeEvent`** — [fires](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L319) whenever the player’s state changes
- **`(error): OnErrorEvent`** — [fires](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L352) if an error occurs in the player
- **`(apiChange): PlayerEvent`** — fires to indicate that the player has loaded (or unloaded) a module with exposed API methods
- **`(playbackQualityChange): OnPlaybackQualityChangeEvent`** — [fires](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L330) whenever the video playback quality changes
- **`(playbackRateChange): OnPlaybackRateChangeEvent`** — [fires](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L341) whenever the video playback rate changes

Here’s a slightly more complete code snippet for rendering and playing a video with the **`<youtube-player>`** component:

{% gist https://gist.github.com/phenomnomnominal/454c75c91c5277ba234bb1d70893a396 %}

### The end! 📼 🎈

And that’s it! It’s great to see cool new components coming from the Angular team. This one provides a really clear API around a pretty common use-case. I’m sure you’ll all come up with awesome ways to use it. Check it out, file any bugs against the [Angular Components](https://github.com/angular/components/) repository, and let me know what you’re building!
🦄