Up next in 10
Angular ngx-youtube-player Example to Embed & Play Youtube Videos From URL in Player in Browser
Jun 13, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this video so
0:04
in this video I will show you Angular
0:06
package which allows you to embed
0:08
YouTube videos directly inside your
0:11
application or browser using a video
0:13
player so as you can see we are
0:15
embedding this video right here using
0:17
this package
0:19
and we have a bunch of buttons here this
0:22
is the play button so as soon as you
0:23
click the play button you will see the
0:25
video will start playing and again if
0:28
you click it the video will pause so
0:30
these are different buttons available in
0:32
this module the name of the package is
0:34
NGX YouTube player so if you go to
0:37
npmjs.com website just search for this
0:40
package ngx
0:42
YouTube player
0:45
so this supports embedding of YouTube
0:48
videos directly from URL the command is
0:52
simple simply execute this command and
0:54
it's almost having 2,000 weekly
0:57
downloads so now to integrate this it's
1:00
very simple you first of all need to go
1:03
to
1:04
the app.module.ts
1:06
file
1:09
so right here we first of all import
1:11
this YouTube player component which will
1:13
be coming from this ngx YouTube player
1:16
library and then we add this to the
1:18
imports array like this YouTube player
1:20
component and then here we define the ID
1:25
so whichever ID YouTube video you want
1:28
to embed so let's suppose I take my
1:30
personal video for example so
1:34
you just need to paste the YouTube ID of
1:38
the video whichever video you want to
1:40
display so this is the URL here of the
1:43
YouTube video so this is the ID here
1:47
this portion you just need to paste
1:50
and uh just paste it
1:55
so now you will see the video will
1:56
change so it will now embed my own video
1:59
so if I click the play button the video
2:01
will start play
2:06
and it's very simple so now we come to
2:10
the HTML part here so the HTML part is
2:13
really simple we have this custom
2:16
component right here if you see
2:19
YouTube player it takes four properties
2:23
first of all your video ID on ready
2:26
function on change function and player
2:28
variable so these are the four
2:30
attributes it takes this is your custom
2:33
component here youtube player
2:36
this is the ID of the video and these
2:38
are two callback functions so we have
2:40
defined these functions right here in
2:42
the typescript where we are initializing
2:44
this video player on state change we are
2:48
embedding this YouTube event so event
2:51
dot data and these are two functions
2:54
here for playing and pausing the video
2:56
so this module contains this function to
2:59
play the video or to pause the video so
3:01
we have these two functions available
3:04
so that's all that we need to do right
3:06
here you first of all import this
3:08
component right here add this to the
3:11
imports array and then we declare these
3:15
the ID of the video that you want to
3:17
embed
3:19
so this is the complete example given
3:21
right here you can check out this and uh
3:25
in this easy way you can embed YouTube
3:28
video right in the video player so NGX
3:31
YouTube player so you can check out this
3:36
so thank you very much for watching this
3:38
video and also check out my website
3:41
freemediatools.com
3:43
which contains thousands of tools and I
3:47
will be seeing you in the next live
3:49
stream
#Flash-Based Entertainment
#Online Media
#Programming
#Web Services