live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
React.js Project to Embed Youtube Video & Playlist From URL Using react-lite-youtube-embed Library
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a library
0:05
inside react CH which allows you to
0:07
embed any YouTube video inside the
0:11
application so the library name is react
0:14
light YouTube
0:16
embed so if I refresh application and
0:20
show to you you will see the video will
0:23
embed right here in the iframe tag and
0:26
you can play the video play it right
0:28
inside the application so you can see
0:30
the video is
0:32
playing so essentially this is actually
0:34
the module here uh the name of the
0:36
module is react light YouTube inet This
0:39
is actually the command to install this
0:41
module I've already installed it and it
0:45
is having almost 66,000 weekly
0:48
downloads so let me show you a very
0:51
basic example on using this package so
0:55
first of all just make a very simple
0:58
functional component and in include this
1:01
module using the import statement so we
1:03
write
1:04
import and then this
1:08
lead YouTube embed this is the name of
1:11
the component and this will be coming
1:12
from this package that we installed
1:14
react lead YouTube Ed and for this we do
1:18
also need to include the CSS file for
1:20
this
1:22
component so in this way we can include
1:26
this and then right in the jsx we can
1:29
can embed any YouTube video and for that
1:33
we you will need the ID of the YouTube
1:36
video that you want to embed or
1:40
display so I will just put the maximum
1:43
WID to 800 pixel and I will align
1:46
everything in the center position so
1:47
zero Auto
1:49
margin and I will just give a padding of
1:52
20 pixels so right inside
1:56
this we will display the video and for
1:59
displ playing it will be using this
2:01
component and this component will take
2:04
four properties so first of all the ID
2:06
of the video that you want to display so
2:08
you can pick any YouTube video that you
2:11
want to display so you only need this
2:14
YouTube ID portion right here in the URL
2:17
so you just need to paste this portion
2:20
the ID
2:21
portion and then you can give it a title
2:24
as well so you will see any title you
2:27
can give uh
2:35
so if you try to refresh it and see you
2:38
will see the video will display and it
2:40
will have this play button out there so
2:42
once you click it the video will play so
2:45
apart from that we can also have
2:47
additional options so params is one of
2:50
the option if you want to start a video
2:52
at a particular location at particular
2:54
time you can mention this start uh
2:58
second duration so this means that the
3:01
video will start from 360 second you can
3:04
also start from a specific location in
3:06
the time so if you click the play button
3:09
the video will play at that particular
3:11
time period and you can even change the
3:14
poster of the video as well you can pick
3:18
any thumbnail type so I'm just picking
3:21
maximum resolution default so this
3:24
will the thumbnail will be maximum
3:28
resolution and and these are all the
3:30
main options which supports with this
3:32
components react lead YouTube embed so
3:35
in this way you can embed any YouTube
3:37
video of your choice and play it if you
3:40
click the play button the video will
3:43
play so this was the tutorial on how to
3:46
embed any YouTube video using this in
3:49
react CH specifically so thank you very
3:52
much for watching this video If you like
3:54
this video then please hit that like
3:55
button subscribe the channel and also
3:58
check out my website as well free mediat
4:00
tools.com uh which contains thousands of
4:03
tools
4:04
regarding audio video and image and I
4:08
will be seeing you in the next video
#Online Video
#Multimedia Software