How to Create a Video Background Component in React JS - With a Background Overlay
How to Create a Video Background Component in React JS - With a Background Overlay
Quick video background tutorial for React JS. Really it’s the same as a static HTML/CSS website, I’ve just been learning React lately so that’s what I built it in! Hope you like it - drop me a comment below!
ZeroTo Mastery:
- Master React JS Course - https://bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - https://bit.ly/Complete-Web-Developer…
Coding Challenges!
https://bit.ly/Code-Challenges
GitHub Repo!
https://github.com/fireclint/video-bg…
☕ Buy me a Coffee ☕
https://www.buymeacoffee.com/clintbriley
Instagram 💪
https://instagram.com/fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - https://amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - https://amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - https://amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - https://amzn.to/3O00nqG
Mic Boom Arm - https://amzn.to/3NHn6YU
Monitor Desk Light Bar - https://amzn.to/3xzKlyj
Content
0.24 -> hey what's up guys in this video i'm going to show
you how to create a full screen video background
4.24 -> and react.js and we're also going to throw an
overlay on top of it in case you want to layer
8.48 -> some text let's dive in so this is what we're
going to be building right here i'm going to close
12.8 -> this down and we're going to be in vs code here
and basically this is just a react.js application
17.76 -> that i just ran create react app in the command
line and then i've deleted all the extra files
22 -> so here we are just a didn't that app.js so
what i'm going to do i'm going to delete this
26.64 -> and first things to do i'm going to create a
couple folders here just an assets folder and
32.16 -> also a component components folder now you don't
have to do this i'm just trying to keep things a
37.36 -> best practice way so in this assets right here
this folder i'm going to drag in my video that
43.12 -> we're going to be using and it is the video
bg.mp4 so i'm just going to set that in the re
49.04 -> assets folder there and then in the components
folder i'm going to create a new component i'm
54 -> going to call it main.jsx and i'm going to
generate a functional component here in this
59.2 -> video it doesn't matter functional component class
based components does not matter for this tutorial
63.52 -> so let's go ahead and import that in app.js so
i'm going to call main now go ahead and import
70.96 -> that there there we go now whenever we type here
we should now see that on the screen there it is
75.84 -> so what we want to do is in order to have access
to this video we need to import it and the way we
80.96 -> import videos or images in react is we go here
to the top we're just going to import and then
85.6 -> we can name our file i'm going to name it video
bg you can name it whatever you'd like from and
90.72 -> then we've got to go find our file path here
so we're in the components folder we need to
94.24 -> get out of this folder so it's going to be two
dots then go into the assets folder it's going
98.56 -> to be video bg.mp4 now we have access to grab
our video so for this outer div i'm just going
105.68 -> to give this a class name of main then in here
we're going to list out our video element okay
111.44 -> so this is going to be a video then we need a
source and then we can go ahead and just close
117.76 -> this now instead of the quotes and react we use
curly brackets here so and in here we should put
122.56 -> the name of our file that we named it and we named
it video bg there we go so we should refresh now
128.56 -> we see the video on our screen only uh problem is
it's not displaying properly and it's not playing
134.24 -> so the way we fix this here we need to add some
properties to our video element so we can add the
140.24 -> auto play we can add the loop and we can even add
muted even though there's no sound in here so now
148.4 -> if we if we refresh air we should now see our our
video here starting to take form now we can our
155.68 -> video is actually playing but we want this to take
up just the full width and height of the screen
160.88 -> and right now it's overlapping we can't really
see the video so let's go in and add some css
166.08 -> here so i'm just going to go into index.css and
i'm just going to kind of remove all this i'm just
170.88 -> going to add a custom few things margin 0 we'll
do padding 0 and then let's add a font family
180.16 -> let's do let's do impact it's pretty cool and
this is within react so you have access to
184.88 -> this font within react so let's first grab our
our outer div here which is uh which is main
190.88 -> we need to specify the width and also the height
of 100 or 100 viewport heights now for our video
200.32 -> we did not give the video element a class name so
we can just grab it by the element which is video
205.76 -> and let's give this a width of 100 we'll give
it a height of 100 and now we can do object
215.6 -> fit and right now the object fit is set to contain
which is pretty nice but what i want to do is
220.64 -> object cover because i want it to take up the full
width and height of the screen perfect so now as
224.88 -> you can see when we scroll when we scroll around
our browser here it just stays within our browser
231.12 -> um if you want to do back to contain that's fine
as well and if you do that you probably want to
235.68 -> change the take away the height there so just
something to keep in mind so i'm going to change
240.88 -> this back to 100 and object cover now let's add
some text to our um let's add some text to our
247.92 -> video here just a little text right there in the
middle here so i'm going to go back into main.js
254.24 -> and i'm going to type a div for the class name
of content and then here i'll have an h1 that
259.28 -> says welcome and then a p tag i'll say to my site
okay so we can't see that now it's actually hidden
267.28 -> behind this video in the upper corner here
so that div name is content so let's go ahead
273.76 -> and grab that content now we want to position this
absolute and we'll say we'll say see width 100
283.84 -> height 100 say top zero now let's uh display
this as flex and then so there it is at the
292.88 -> top now you see it now let's do flex direction
we'll do column and let's put this right in
298.24 -> the middle so we're gonna do justify content
center then align items to the center as well
304.56 -> and i'm gonna make this text so i've been using
tailwind so that's where that came from text white
311.2 -> there we go so that looks perfect that's what we
want now that's how we display uh full width video
317.04 -> and react.js but what we want to do see this text
is kind of hard to read it'd be really nice if we
321.68 -> could put a nice overlay behind it so we can
the text will pop out a little bit so let's do
326.32 -> that right now let's go back into our main.jsx
we can actually close those so what we want to
331.12 -> do we want to add a div here it doesn't really
matter where i'm going to add it at the top just
335.84 -> below our video here so we'll have a div and i'm
just going to name that give it a class name of
341.68 -> overlay so you can name it whatever you like
i'm going to name it overlay so now in here
346.8 -> let's grab the overlay and we want to position
this absolute and then we'll say top 0
353.52 -> left 0 width we want to take up 100 height 100
and this is of the parent container okay you guys
362.32 -> and then we also want to give this a color now
i'm going to use rgba for the background color
369.6 -> we'll say rgba and that takes
in a few values four values
374.8 -> for black it's all zeros there and then the last
element is the alpha and we can kind of define the
380.56 -> the how see-through our our color is here and i'm
gonna say 0.5 so if we go up to 0.9 it's going to
386.16 -> be a lot darker notice you can barely see through
if you go down to 0.1 it's almost like it's not
390.72 -> even there so i'm going to leave it around 0.4
now another way to do this if you're using the hex
395.92 -> code here you can go down and say background color
for black is all zeros and then what you can do
405.36 -> is add just cc at the end and now you
can see it gives it an overlay look so
410.64 -> but i'm going to use i'm going to use the rgba
because it's a little bit easier to customize here
415.92 -> and that is what we want right there you
guys that's how we display a full width video
420.32 -> background in react.js and we added a nice overlay
so our text really pops out thanks for watching
426.08 -> you guys i hope you liked it smash the like button
and i'll be putting out some more content just
430.48 -> like this and react here in a few days so thanks
for watching you guys i'll see you on the next one
Source: https://www.youtube.com/watch?v=LSRNmhLS76o