videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build React.js Youtube IFrame Player API to Embed YT Videos in Video Player in Browser
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 look at how to
0:04
build out a YouTube video player inside
0:07
react CH you can play any YouTube video
0:10
inside your react CH application using
0:12
iframe API of Google and it does provide
0:16
you with this nice little package which
0:19
you can interact with so you can see on
0:21
your screen we are loading a YouTube
0:23
video embedding it inside your
0:25
application and we have three buttons
0:27
out there so once the player is ready
0:29
the video will display and we have these
0:32
three buttons to play the video pause
0:33
the video or stop the video if I click
0:36
the play button the video will play if I
0:39
click pause the video will
0:46
pause so we have these buttons so and
0:48
the status will also change you can
0:53
see so video is
0:58
playing so the package which is
1:00
responsible for this uh you can go to
1:03
npmjs.com
1:05
and just search for this package which
1:08
is react Das YouTube so this is actually
1:13
the
1:16
package it is officially it's a using
1:20
the YouTube iframe
1:22
API YouTube iframe player API it is
1:25
using this API to actually embed the
1:27
YouTube video uh this this is it's
1:31
almost 4,000 weekly downloads and this
1:33
is the command so just install this
1:35
module I've already installed it so I
1:37
will show you the complete example so
1:40
first of all just make a simple react
1:43
functional
1:45
component and right we will at the very
1:48
top we will require this package we'll
1:51
simply say import YouTube from the react
1:55
YouTube this is the actual
1:57
method and then we'll also be using
1:59
bootst for building the user interface
2:01
this is not
2:02
mandatory but you can install this just
2:06
to look good react bootstrap and
2:09
bootstrap so I personally use these two
2:12
libraries for building the user
2:13
interface so just install
2:16
this so we have just imported
2:19
this and now for we need to declare some
2:23
State variables for the player video
2:25
player so we have player set player and
2:29
we'll be using the UST State hook
2:31
initial value will be null the second
2:33
variable will be used to
2:36
basically
2:37
just draw the
2:39
status so this U State initial value
2:43
will be player not
2:45
started here it will just be showing the
2:48
status of the video
2:50
player and after this in the jsx right
2:53
here we will now be
2:56
having we will wrap everything using the
2:59
container class
3:00
of bootstrap component I give it a class
3:04
name of margin top five inside this we
3:08
will actually have the
3:11
row and the class name justify
3:16
content
3:18
Center and here you'll be having uh a
3:21
column and give it
3:24
a access property to auto
3:30
give it a S2 property which will be
3:32
YouTube player with
3:37
react I'll will be using this component
3:40
this component actually takes uh the
3:43
video ID as an argument so you need to
3:46
go to YouTube whichever video that you
3:48
want to
3:51
load so I will load my own Channel video
3:55
so what I will do you copy the link and
3:59
then paste it and you only need the
4:01
video ID so right
4:05
here this is the video
4:08
ID once you get the video ID after this
4:11
you need to declare some options so I
4:14
can actually declare an object right
4:17
here at the very top and declare an
4:20
options and this actually contain the
4:22
height of the player let me give it 390
4:25
pixel and the width of the player let me
4:27
make it 640
4:30
you can give any width and height and
4:32
then it takes your player variables
4:35
which includes the autop playay option
4:38
if you want to play the video
4:40
automatically then you put it to zero so
4:43
it basically tells that do not autop
4:45
play the video on video load so once you
4:49
can pass these
4:52
options by passing a property the second
4:56
property it takes his
4:58
options NE can provide these options
5:01
that we have and it also takes an on
5:04
ready call back function so when the
5:06
player is ready you will execute this
5:09
call back function on player ready you
5:12
can call this anything so this is our
5:14
call back function so when the player is
5:17
ready when the YouTube video player is
5:20
automatically
5:21
loaded so inside this e parameter will
5:25
automatically be passed and here we can
5:27
set the player to e. Target and set our
5:32
St status which is player is
5:36
ready so if you refresh your browser you
5:38
will see it will look something like
5:42
this so the video will get
5:45
loaded and now to show the status we can
5:48
simply go to the jsx and
5:53
write after this we can have a
5:57
row just give it a class last name of
6:01
justify content
6:03
Center margin ofp four and inside your
6:11
column here we can put the
6:15
alert and we can actually variant will
6:19
be of
6:23
info
6:24
status so now the status will show right
6:28
here player is ready
6:30
so now we need three buttons which will
6:31
be responsible for interacting with the
6:33
video players so right after this is
6:38
ending we will have three buttons so
6:42
give it a
6:44
row and just align this in the center
6:47
position so we will simply say that
6:48
justify
7:02
so inside this you will have three
7:03
buttons first button would be for
7:05
playing the video second one would be
7:07
for
7:12
pausing and the third button would be
7:14
responsible for stopping the
7:22
video so let me give it some classes to
7:25
so this variant will be of primary a
7:28
blue color and and give bind on click so
7:32
when we click this function we'll be
7:33
executing this function play video and
7:36
same thing I will do this for rest of
7:39
the
7:56
buttons so this one will be for pausing
7:59
the video this one will be for stopping
8:02
the
8:04
video so variant let me change to
8:06
warning it will be a yellow color and
8:09
danger red color so now we have we need
8:12
to Define all these three functions
8:15
which is for playing and pausing so one
8:18
by one play
8:22
video for playing the video we actually
8:26
if the player is loaded in that case we
8:28
have a function which in this which is
8:30
play video so it will play the video and
8:32
it will change the status
8:35
to playing
8:38
video similarly we have both these two
8:41
methods for pausing and
8:43
stopping also available so I will just
8:47
write these two methods
8:50
again so we have this method pause video
8:53
and then it is stop
8:56
video so now we have these three buttons
8:58
so if I click click one by one play so
9:01
playing video hello guys if I pause the
9:05
video video is paused video stopped so
9:08
in this way you can embed any YouTube
9:10
video inside your react CH application
9:12
using this YouTube iframe player API
9:15
package and react CHS so I've shown you
9:18
a complete example all the source code
9:20
is given in the description so thank you
9:22
very much for watching this video please
9:24
hit that like button subscribe the
9:26
channel and also do check out my website
9:28
as well free mediat tools.com which
9:30
contains thousands of free tools
9:33
regarding audio video and image and I
9:36
will be seeing you in the next video
#Flash-Based Entertainment
#Multimedia Software
#Web Services
#Educational Software