How to create a background video | HTML & CSS tutorial

hello there and welcome to this video where we are going to be looking at how we can do a hero section with a big background video like this and really it doesn't have to be a hero section it can go anywhere you want in your site but we're not just going to look at how we can make the video background like this with some text on it we're also going to be stepping it up we're gonna look at how we can really easily overlay a color on it just like this and we're going to be doing that without creating an extra div like a cover div or overlay div or whatever you want to darken it or if you had to it could work to lighten it as well and because it is super easy to do we can also do it to overlay gradients just like this and with this gradient overlay it just as easy as that color overlay again no need for any extra divs this is all being done with just our main div and the parent that's in there so let's jump in and see how we can do all of this I just want to say before we get started all of this a really important note I'm not doing a deep dive into video for this one we're gonna do enough to get it set up but the focus of it really is on the CSS side if you'd like to see a video that looks more into html5 videos please leave a comment down below and let me know about it and that's something that interests you and I'll look at doing a video that takes a much bigger deeper dive into the different video formats and we can set up sources and all of that but for now let's go and see how we can do just this video background so here we are in vs code and already they get going and the very first thing I'm going to do is come right here and I'm going to bring in my video so let's go ahead and do that so we need a video just like that and in my video we do need our source on my source it needs an SRC so it's just like an image and we also need a type on here to let it know what type of video it is now in this case I have a video already so it's in an assets folder and it's called Swann's mp4 so over here because it is an mp4 I do want to write a video forward slash mp4 on there because it is an mp4 let me turn off the word wrap that we had on there so we're gonna have something like that so it's my source the assets and the type it as I said in the intro this is not a deep dive into how to set up our video we're just really looking at how to set it up as a video background so I'm entering my word wrap back off and keep going on this on the video here together this to work there are a few important things that we have to do so one of those is to autoplay it because we want our video to play automatically obviously because there are no controls now this is one of those things that generally is sort of frowned upon but we're gonna be doing it anyway because we don't have a choice if it's in the background people can't interact with it we do need it autoplay and in most of modern browsers these days we also need to have the muted attribute on there because without the muted attribute it's not going to autoplay a lot of the browser's these days are stopping videos from auto playing if they are not muted even though this video has no soundtrack it is important that that is there and if we do it like this it's gonna play one time and then it will stop so we also want to throw a loop on there so let's hit save and see what we got so there we go I have my text and I have a that video playing right there now one of the reasons that is next to each other and that underneath is because I do have a display of flex on my hero here that's just because I'm gonna be using that or am using that to keep my text right in the middle if you do want to watch a video on how to Center things I do have a link in the description below but that does look at five different ways we can Center things vertically and this is one of them now the real trick to having a video background that actually ends up in the background is well we need to have it be position:absolute so actually I come back to my index here just really quickly and on my video itself right here I'm gonna add a class of video DG and hit save on that then we're gonna come back to here and I'm gonna add that in right here video BG and I need to add some styles to it now one thing is I am going to be doing this as position:absolute and because this is on the site hero section it's at the top of my screen the position:absolute would sort of work here but we always want to make sure that it's within its parent so to make sure it's always within its parent we do need to do a position:relative up over here it could be a different position but generally speaking you'll probably be using position:relative most of the time for this to make sure that when we do a position:absolute that it is within that it's sticking around within the parent up here so I'm going to do a position:absolute I'm gonna say top zero and left zero let's hit save and see what's happened and look at that if repositioned itself now you might be noticing there are a few different problems one of them is it's on top of everything and we needed to be below our text so that is problem number one problem number two is it's actually overflowing at the bottom of this so it's sticking at the bottom which we don't want to happen and problem number three is it's not wide enough so I'm gonna fix this overflow problem first I'm going to come on my hero and on here we're going to just give this an overflow of hidden to make sure that if it is overflowing at the side that that will not cause a problem and with the changes for a boat to make it could potentially overflow left and right as well on the x-axis and we don't want that to happen either so I'm gonna come down here on my video BG and we're gonna play with this a little bit to make sure it always fits the size of the parent so what I'm going to do is give it a min width of 100% and I'm also gonna give this a min height of 100% and I'm gonna hit save on that now it is matching the size of that background this is going to be a little bit like a background size cover but there is one problem with it we're gonna be seeing the solution to that problem at the very end of this video because I want to focus on just getting it as a background first and then we're gonna see how we can actually have it centered instead of it being stuck on the top left here because it is a little bit trickier on how we could do something like that now the very first the next thing we do is actually take off my padding of 200 zero that I had here which was just pretty much giving me my height I had 200 padding on the top and 200 padding on the bottom and what I'm gonna do is give this a minimum height of 100 VH which should make it the full size just reiterating what I was saying before we were running into a little bit of an issue where I'm sort of stuck in the top left here so again we're gonna solve that problem in a little bit so one thing now the obviously the biggest issue we still have right now is that it's in front of our text so how can we deal with that Wow this is something I find that's absolutely fascinating with position:absolute and what that is is if you I'm sure you know about the Zed index but if you give a Z index that's a negative value it will actually push it below the parent which is really really cool and useful so if I hit save on that it disappears because it's behind the parent itself right now and you might be saying well what's the point now we can't see it well let's turn off my background for a second there we go look at that so with no background on there my text my video playing in the background super super sweet I think that looks really cool I'm actually going to shrink this down to like a 50 VH and so there we go we can see it playing it really nicely everything is working just fine but what if we wanted to have a background on there can you think of a way that would be kind of cool here because this is kind of neat so doesn't do is give this a background but it's going to be an RGBA value instead and if I gave it an RGBA value let's give it a zero zero zero first and say like a point five what's that going to do well it's going to darken the entire video if I make this a point seven five it makes it even darker if I make it a point two five it makes it lighter and we can do some really cool things with that because instead of using just an RGBA like that we could give this a linear gradient background image just like that linear gradient and let's just say it's 90 degrees so it's going left to right and we'll do a red to blue and just like that we have a nice simple gradient but there's a problem once again is it's on top of an image and I can't see it so we could transfer this red it lets us put each one of these on its own line because it's going to make it a heck of a lot easier to read I'm going to just move these over so here instead I've read a menu in rgba and my read is gonna be 255 because that's a hundred percent red zero green zero blue and we'll do a point thirty five I think on that and here instead of blue we need any other RGB a and this time it will be zero zero four no red no green 255 blue and we'll stick with the point three point three five right there and we get a gradient overlay not sure if it works super well at this video you will notice it jumped over there that's just because they are prettier running right now maybe we could boost the values on this this is I think built-in automatically to be s code where if you hover over you can sort of make some changes there and you can see that the gradient is on top of there so that's obviously another option that you can be using playing with your RGB values to get something like that working but I think for now I'm gonna get rid of that and go back to having it on just like that or we're darkening up our video and I'm gonna dark it up a little bit more to make sure our text is super easy to read now I did mention that we're sort of stuck a little bit so let's go and bring this back up 100 VH again you can so now we are stuck here back in the top left and we might want the center of the video to stay there regardless of screen size so I'll you know I could take my window and I'm gonna make it bigger and then I am seeing the center of my video but then when we're on the smaller screen size here obviously we're running into a bit of an issue where we're not seeing the center and maybe that's important so to fix something like that what I'm actually going to do is come back down here into my video BG but I'm going to switch the top and the left I'm gonna do a 50% on this one and a 50% on that one and I'm gonna hit save and we're gonna see that that puts the top left of the video dead center and you might be saying well that that's kind of useless then what we can do is come and do a trans form translate and what I want to do is a negative 50 percent negative 50 percent and what that's doing is it's taking the video itself this is looking at the dimensions of the video and it's going to move it its own size 50 percent that way and its own size 50 percent up this way and that will actually make it dead center so let's hit save on that and boom now we're focused on the center of the video and if we resize my screen you can see that it's always always always focused right on the middle of it instead of being focused on the top left when our screen was resizing and of course that would work and absolutely any screen size it's just when we had it here we weren't really seeing that but it will work across the board and that is that is actually one of the other tricks that is in that video that I talked about about how we can Center stuff so if you do want to check that video up there is a card for it on the screen right now recommend you go and check that one out if you have some time a big thank you for watching this I really hope you enjoyed the video if you've learned something or if you have any questions or comments or video topic ideas please leave them down below and as usual a huge thank you to my patrons for helping support me and making all of this possible a thank you very very much guys you guys are amazing and of course until next time don't forget to make your corn in the internet just a little bit more awesome

Channel: Kevin Powell

Views: 29,492

Keywords: Kevin Powell, tutorial, html, css, background video, website background video

Id: RIDA6elhmBU

Length: 10min 54sec (654 seconds)

Published: Wed Sep 18 2019