DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for The new Angular YouTube Player component!

The new Angular YouTube Player component!

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), is the rename of the angular/material repository to angular/component โœจ. This rename is meant to capture the fact that the repository is for so much more than only the Angular Material library! The Angular Components repository already also contains the Angular Component Dev Kit, 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. This component is a thin wrapper around the embed Youtube player API. Letโ€™s check out what it looks like:

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:

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

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 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 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.

  • (ready): PlayerEvent โ€” fires whenever a player has finished loading and is ready to begin receiving API calls.
  • (stateChange): OnStateChangeEvent โ€” fires whenever the playerโ€™s state changes
  • (error): OnErrorEvent โ€” fires 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 whenever the video playback quality changes
  • (playbackRateChange): OnPlaybackRateChangeEvent โ€” fires 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:

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 repository, and let me know what youโ€™re building!
๐Ÿฆ„

Top comments (15)

Collapse
 
splaktar profile image
Michael Prentice

Thanks for the write up!

I just made some changes to show how you can have the video resize to fit its container space: github.com/angular/components/pull...

Here's that demo on StackBlitz: stackblitz.com/edit/youtube-player...

Collapse
 
wsadqe1234 profile image
WSADQE1234

Dude THANK YOU!!!! U are AWESOME!!!

Collapse
 
phenomnominal profile image
Craig โ˜ ๏ธ๐Ÿ’€๐Ÿ‘ป Author

Awesome! Thank you!

Collapse
 
taylordwright44 profile image
taylordwright44

Hello. I was wonder, with the tag method, what's the best way to use youtube's javascript API? For example I want to change the video time with player.getCurrentTime() or something. How would I do this?

Collapse
 
arcticjuggernaut profile image
Chris Johnston

You bastard you had to use a baby shark video didn't you?!

Collapse
 
phenomnominal profile image
Craig โ˜ ๏ธ๐Ÿ’€๐Ÿ‘ป Author

๐Ÿฆˆ๐Ÿฆˆ๐Ÿฆˆ๐Ÿฆˆ๐Ÿฆˆ

Collapse
 
lalish99 profile image
Eduardo Rojas • Edited on

Great post!

One question, I've added a video correctly but I am wondering if I need to pay attention to the following warnings, apparently they start appearing after I use the Youtube Api directly or with this new component. Thanks in advance

Collapse
 
oleksandr profile image
Oleksandr

Cool

Collapse
 
lisacopeland profile image
Lisa Copeland

Thanks! That was super simple to use! I was also able to use breakpoint observer to make it responsive!

Collapse
 
cook_n_pop profile image
Cooknpop • Edited on

You can use also use to make it responsive the bootstrap embed-responsive class

Collapse
 
toshminosh profile image
Toshminosh

Does startSeconds work yet?

I can't seem to get it working though height and width work fine.

Collapse
 
phenomnominal profile image
Craig โ˜ ๏ธ๐Ÿ’€๐Ÿ‘ป Author

I've actually had the same issue! I started debugging it, but didn't get very far! You should raise an issue on the repo, or even make a PR!

Collapse
 
lautarojgarcia177 profile image
Lautaro Garcia

Does anyone know how yo hide the player's controls?

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen

Pass { controls: YT.Controls.Hide } to the playerVars input property.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!