0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you how to
0:04
embed a YouTube video inside your
0:07
ReactJS application using
0:10
a library called as react YouTube in so
0:13
you can see we are displaying a
0:15
embedding a YouTube video right here in
0:17
the web page itself we can play this
0:23
uh the name of the module that we are
0:26
using is if you go to npmjs.com just
0:29
search for the module which is
0:31
react YouTube embed so this is actually
0:34
the module here which uh we are using
0:37
right here to embed this YouTube video
0:40
it's completely responsive component for
0:42
specifically for ReactJS so the command
0:44
is simple you simply install this it's
0:47
almost having 4,000 weekly downloads and
0:51
uh now I'll show you a complete example
0:54
it's very easy just create a simple
0:56
functional component and first of all we
0:59
just need to import this module so we
1:01
simply import this like this using the
1:08
statement so using the import statement
1:11
we actually first of all import this and
1:14
now wherever you need to embed the
1:16
YouTube video let's suppose in this div
1:18
tag I will just give it a width of 800
1:23
pixel and uh let me give it a height of
1:30
pixel and then I will just give it a
1:32
margin of auto and a padding of uh 20
1:37
pixel and inside this we need to show
1:39
the YouTube video we will simply embed
1:42
this so YouTube will embed example after
1:47
that we will use this component right
1:53
imported as you can see we are simply
1:55
importing this we're using this and it
1:58
actually passes it takes an attribute
2:01
right here property such as the ID of
2:03
the video so whichever ID whichever
2:06
video you need to embed you need to
2:10
so if I refresh now uh you will actually
2:12
see this YouTube video will
2:17
display and it's completely responsive
2:20
you can just see how it is looking on
2:22
mobile devices and uh you can pick any
2:26
video of your choice you just need to
2:29
copy this portion right here this
2:31
portion this is the ID of the video so
2:37
just change it and you will actually see
2:40
you will be able to display any YouTube
2:42
video inside your react application it's
2:44
a very simple module it takes very
2:46
little code you can just see it is
2:50
haven't using any API key it basically
2:52
you import the module and simply you use
2:55
it by passing the ID of the video
2:57
whichever video you want to display you
2:59
simply pass the ID and then that video
3:02
will be displayed or embedded inside
3:04
your ReactJS application so this is
3:06
actually the module guys you can
3:08
responsive YouTube embed module
3:11
officially you can use
3:13
it just install it and start using it
3:16
it's very simple you can even embed
3:18
multiple videos as well so let's
3:22
suppose you can actually copy two times
3:25
here so now it will display two videos
3:31
uh I think what you need to do uh you
3:35
You can actually use a for each loop for
3:41
this you can create a array here
3:50
uh so let me just ask chat GPT how to
3:54
add uh multiple videos
3:59
so why it is not working i want to
4:08
multiple so you can ask question right
4:10
here it will give you the answer
4:27
so this is actually the module guys you
4:30
can definitely use it you can see now it
4:33
is using multiple videos here so I was
4:37
just putting a typo mistake right here
4:39
you can see just need to close it this
4:42
is your first one second one in this way
4:44
you can display multiple
4:48
videos what so this was
4:51
the video guys regarding this YouTube
4:54
embed inside your ReactJS application
4:57
all the source code is given in the
4:59
description and also check out my
5:01
website freemediatools.com which
5:03
contains thousands of tools regarding
5:05
audio video and image and I will be
5:08
seeing you in the next video
