Full Screen Video Background - HTML & CSS

[Music] hey what's going on guys so it's Friday I wanted to do something that's relatively simple but still useful so we're gonna create this landing page with a video background so this video will play in the background we have an overlay with CSS to make it a little darker and you can change how dark you want it so for instance if I change a value here in the CSS now you can see it's darker and we're not going to be using any kind of library or anything like that just straight HTML CSS we'll be using the html5 video element and positioning things positioning the overlay and so on so basically it says this takes up the whole viewport and then as we scroll down you can have more sections I just have this one about section but of course you could add more you could change the video customize it make it into a whole new website at a nav bar and so on and it is responsive so if I open up my device toolbar here you'll see it still looks good on on smaller devices okay so let's get into it we'll jump into vs code and I have 4 files I have an index.html and a style CSS which are completely empty and then I have my movie so it's called video dot MOV and then just a cover JPEG to use as a background image for that split second that the the video takes to load ok and I'll have the code in a code pen down in the description if you want to grab that so let's start off here with the HTML I'm just gonna add a boilerplate here and just say video landing page and then we'll link in our CSS and I'm also going to be using font awesome for the social media icons I mean you guys don't have to add this if you don't want but I'm just gonna grab it from CD nsj so font awesome and let's grab the link tag let's go to CSS and then link tag copy that close that up and paste that right in there ok so in the body we're basically just gonna have two sections one is going to be the showcase section which is the large you know the landing page with the video and then we'll have the above so let's say it's good this an html5 section tag with the class of showcase and in here we're gonna have a div with the class of video - container and this is gonna wrap the video tag which is going to point to the video dot MOV file now I do want to add a couple html5 attributes in here one is autoplay because I want it to play automatically muted so if there's any sound you can mute it and then loop so it's so that it keeps playing and of course you don't need these attributes but that's just what I want to do here and then I'm gonna have a class of content and this is where the text is going to go so the h1 will say shoot for the stars and then we'll have underneath that an h3 and I'm gonna say full say full screen I can't type and talk video landing page and then underneath that will have a link that'll be formatted as a button so I'm gonna give it a class of BTN and it's gonna go to the ID of a bow and we'll just say read more so that's it for the the showcase section so underneath that let's create a section with an idea of about and inside here we'll have an h1 that'll say about the why that keeps going lowercase and then a paragraph which I'm just gonna grab the text of course you can just put dummy text in here if you want and then I'm gonna add an h2 and say follow me on social media which you guys should all do and then class of social so in here I'm just gonna have some links that point to my accounts wrapped or I'm gonna wrap the icons in links so we just have some links and then we have the eye tag so for instance Twitter I used FA 3 X just to make the icons a little bigger so we'll save that I have Auto format on save so now it's nice and pretty so let's open this with live server which is a vs code extension and what we have is just the video takes up the whole screen here and then all of our content so now it's time to style this so we're going to jump into our CSS actually one thing I want to do is grab the font to that I'm gonna be using from fonts google.com and that's gonna be open sans so we'll just grab that I'm gonna grab the light 300 and regular 400 and then if we click over on embed and then import we can grab the import right here and then just copy that and put that right in our stylesheet okay now before we get to like the video and showcase and stuff I just want to add some base styling I am gonna add a custom property here on the root scope for a primary color so the syntax is - - and then whatever you want to call this primary color and I'm going to set this to a hexadecimal value of 3 a 4 0 5 - which is like a dark blue grayish color similar to the night sky and then I'm gonna go ahead and just set box-sizing border box on everything and then just reset the margin and padding on everything which is what I usually like to do and then for the body let's add our font family of open sans and I'm gonna just add a line height let's do a line height of let's say 1.5 okay and then just some other base stylings like for links we'll set the text decoration to none so that we don't have any underlines and I'm gonna set the color to that variable so we can use var and then primary color okay and then for the h1 I want to clean it up a little by making the font weight less so let's - make 300 for the font weight and then let's up the font size to 60 pixels and lower the line height so that when it's on two lines there they're not so spread apart so we'll do one point two and then margin bottom to push everything down we'll do 15 pixels okay so if we look at it now not too much different we just have cleaner fonts so now we're going to start to work on the the main showcase area so excuse me let's add that class here so showcase we're going to go ahead and position this relative and because we're gonna have stuff in it positioned absolute we want to set the height of the showcase to take up the entire page so we're going to use VH which is the viewport Heights so it'll take up 100 basically a hundred percent of the heights of the viewport we're gonna we want to center that all the text and stuff the content so I'm gonna display as a flexbox and then just set the Flex direction to column that way we can use align items Center and justify Content Center excuse me which will Center it on both the main and the cross access so basically the X and y axis because we want it to be right in the middle and let's see we're gonna set also set the text align to Center and let's add a little bit of padding on the sides we'll do 20 pixels on the sides so let's see if I we take a look at that you can see the content here is centered now we want this to be up here and we want it to be in front of the video so let's now style the video container in fact I just want to show you if I were to comment out the video here and take a look you'll see that the text is right where we want it to be the button looks like crap but we'll still style that later so let's uncomment that and now let's style the video container so video container and we want to position this to be absolute know what that is absolute and we're gonna start at the top left corner so top:0 left:0 we want to spread all the way across we want the height to go all the way up and down so 100% what else do we want to do here let's set the overflow to hidden so that we don't have any scroll bars and the background here I'm actually gonna set - first of all the the primary color but then I'm gonna have a you an image over it so the URL is gonna be that cover image which is right in the root so just dot slash cover dot jpg and then let's set a no-repeat background repeat' property and then Center Center for the position and then slash cover for the background sighs okay so that's the video container [Music] let's just see what that looks like okay so now the text is up here but it's behind the video so to move that forward we can use z-index so remember the text is wrapped in a class of content so what I'll do is set that z-index to something like 10 and that should be enough to move it up front and actually we want this color we want this to be white so for the showcase we'll go ahead and set color to white okay and don't worry about the button we're gonna style that afterwards now for the video itself so I'm gonna say video container and then for the video tag itself we want to set a min width of 100% and we're also gonna set a max width I'm sorry I'm in not a max width a min height of 100% and I'm also gonna use object fit which is a property that's similar to background size for a background image and we're going to set it to cover now if we take a look so it doesn't look bad but one thing that I want to I want to mention is that if we make this smaller you see how the video just kind of stays and where it is if we go to let me just make this bigger and then go to the original one and then resize this you'll see that it has a different effect that basically just kind of grows and it stays in the middle basically this doesn't this just stays exactly where it is and I don't want that effect so to fix that and I know we don't have the overlay yet we'll take care of that in a minute but to fix that we're going to set the we're going to set the position of this video to absolute and then we're going to set the top to 50% basically we want to we want to always keep it in the middle so we'll say top 50% and from the left 50% now the problem with doing this is that if we take a look at it now the video the 50% is from the is from the corner right here so it's 50% down 50% over now we want it right in the middle so to fix that we can use transform and then translate because translate will move it along the x and y axis so if we say transform and then set translate which takes in whatever we want for the X and y-axis we're gonna do negative 50 percent negative 50 percent okay so that's x and y and this is used to put things directly in the middle rather than from there you know from the edge so now if we check it out it's right in the middle and if we make this smaller we get that same growing and shrinking effect instead of you know how it was before all right so now that that's taken care of let's do the overlay cuz this is way too bright this text isn't I mean I guess it is readable but this should be a little darker it's way too bright so one thing we could do is add a new div for an overlay let's make that position to absolute and then make it cover everything but instead of having adding a separate div and adding to our HTML I'm going to use after pseudo selector so what we can do is on the video container say : after and this is used I mean it's used mostly for overlays in my experience but you can also insert content like we could actually insert the text hello after the video container now we don't want to insert any text however we do need this content property we're just going to leave it as an empty string and then we can we can style this just like any other element we can position it to be absolute within the showcase we can put it to the top corner so top left there gonna be zero and then we want to spread all the way across so with a hundred percent height 100 percent and we could set a background color if I set this to blue and save and we take a look we can see that that element which is basically I like to call it a ghost element when you use before and after cuz it's almost like you're just inserting an element that isn't there and then styling it so it has this blue background which is now covering the video all right it's not covering the text because we set that z-index to ten but it is covering the video and that's what we want but we do want it to be translucent we don't obviously don't want a solid color that would be pretty pointless so we could set an opacity but what I would like to do is just set this to an RGB a value so red green blue alpha we want it black a black overlay so if we do zero for red green and blue that gives us black and then the last value the Alpha is the transparency or the opacity so we'll set that to one set it's a 0.6 so now if I save that we go back now we have this dark overlay and obviously you could change this if you want it to be darker we could raise it to like 0.9 and now it's really dark you can barely see it but you may want that effect so I mean it's up to you how you know how light or dark you want it so that's pretty much it as far as you know putting a video behind content here now I just want to finish up the page so for one thing this button I want to style that so that has a class of BT and I'm gonna display this I usually like to use display:inline-block for buttons and then we can add padding so 10 pixels 30 pixels top and bottom the background for this I'm going to use that variable color that custom property of primary color and then let's add a color of white and I'm gonna do a border of one pixel white solid and a border radius of 5 pixels and a margin top just to bring it down a little bit we'll do 25 pixels and I'm gonna make it a little bit translucent so let's set the opacity to 0.7 and then just for a little hover effect on the hover state we'll set the transform and we'll use scale and we'll scale it down a little bit let's do point 9 8 so it'll just scale it from 1 to 0.98 and if we go and take a look you can see that it scales down a little alright so the next thing I want to do is the About section which is pretty simple so we have an idea of a boat and I'm just gonna set an overall padding of 40 pixels and just text align everything to the center okay and then let's do the paragraph so we have a boat paragraph I'm going to increase the font size a little bit will do 1.2 rem units and then set a max width because I don't want it to go out all the way so I'm gonna set a max width of 600 pixels and I'm gonna set margin to auto and then for the h2 so you know the follow me on social media I'm going to set the margin to 30 pixels on the top and bottom and set the color to that custom property of primary color and then the last thing I want to do is for the links so we have a class of social and we have some a tags in there that's around the icon I just want to set some margin in between them so I'm gonna do five pixels on the left and right so now if we take a look we have our video and we have our About section okay and that's it and if we check it out on a mobile device it still looks pretty good so that's it so feel free to use this in your projects guys if you want to you know add a new video and create a bunch of sections down here and stuff you're free to do that like I said the code is in the description inside of a code pen so that's it thanks for watching and I'll see you in the next video

Channel: Traversy Media

Views: 77,956

Keywords: html, css, video background, html video, landing page

Id: Gx_7GQtSdpc

Length: 17min 52sec (1072 seconds)

Published: Fri Apr 24 2020