So, creating a video background is a pretty straightforward process as we can copy and paste from our video background project on code pen. There'll be one key difference with our implementation here. This time, we're going to have the video file locally instead of as an external link. This will allow it to be cached and load offline on our mobile devices. It will be important to try to limit the size of the file to improve performance. So make sure that that's something you consider when selecting a video.
Okay, so first, we're going to go back to pixabay.com. And I'm going to go to videos and I'm going to type in waves. I'm going to try to get the same video as before. Okay, there it is there. And so we're going to go to the download and you can see the different file sizes here. So 1080 is 20.
To 720 11 megabytes. So you can see there's a big difference, I'm going to go with 720. If you want to have even better performance, you can go with a slightly smaller resolution file there. So we're going to download that. And next we're going to show one folder so we can see the file, we're going to Ctrl x, we're going to cut that and we're going to go back to our desktop. And in our coding projects folder here, we're going to create a new folder assets.
And we're going to use this folder to store all of our video pictures and font before we put it into our website in case we need to optimize or crop or something. We have all the files here and all of the original files as well. So we're just going to rename this video dash background. In this case, we're not really editing anything about This file, so we can Ctrl C, we're going to copy that. And we're going to go back out, we're going to actually go into our Angular projects. And we're going to go source an assets.
And see we have an icons folder here, we're actually going to create a new folder, image IMG for short. And we're gonna go inside, and we're gonna press Ctrl V, and we copied our video background file into our assets folder. Next, we can actually go back and Alt Tab into Visual Studio. So we can actually clean up this little bit, give ourselves a little more space, we're gonna close the index dot HTML file. And we can also minimize the Explorer just to give us a little bit more space. Okay, so now we're gonna start working in our home section.
So first, we're going to comment out a title for our video back Round just to kind of separate all of our elements. And then as before, we're going to use a video element. And we're going to move the source. So we're just going to have this be loop, muted. autoplay, you can see it auto completed there. And we're also going to give it an ID of video dash background.
Okay, and inside, we're going to give it a source element. In the earlier video, I actually put a closing tag with that, but we actually don't need it. And so inside we're going to have an SRC, press Enter. And the cool thing with Visual Studio code is it autocompletes our paths for us. So if we type dot dot slash, this will go up one folder from where we currently are, and we're going to click on the assets folder. Then into our IMG folder, and we can see we have our video background there.
Alright, so that makes that nice and easy. We're also going to explicitly add a type of video slash mp4. Alright, cool. So this is probably a good time to actually serve our project. So we can open up the terminal again, there's actually a keyboard shortcut for this, and it's Ctrl and single quote. So you can see we opened up our terminal, and we're just going to type in G serve dash O.
And we can close this and there we go. So we can close this as well. Alright, so we have our video here, it's not playing at the moment, but it's probably just loading. So we're gonna go back here, we don't really need to look at this as it's running so we can minimize this for now. Okay, so the next thing we're going to do is we're going to add our video overlay element. So we're gonna make a div, dot video, dash overlay.
And we're also going to add in our own sorry, we don't want that inside the video. We're gonna put that below the video. And next we're going to add our h1. So we're going to do an h1. This time we're gonna give it a class because we might have different h ones down the road and we want to just target styles for this. And we're gonna make it the same your title here.
Okay, cool. Now we're going to go back to our code pen project. Okay, and now we're going to go to our dashboard. And we're going to click on our video background project. And we're just going to Ctrl A Ctrl C in our CSS. And we're going to Alt Tab back to Visual Studio code, we're going to go into our app component dot CSS.
And in our home section, we're going to paste in our previous CSS. Let's increase the font size to five. And let's Alt Tab back. And now we can close this and check it out. All right, so that's looking pretty great. We can see that the full screen is taken up with our awesome video here.
We have our title here. And I think we're off to a very good start with our main project. Next, I'm going to show you how to add custom fonts from Google to the project to really give it its own unique feel. All right, I'll see In that one