Fullscreen Video Background With HTML & CSS

[Music] hey what's going on guys so a few months ago I created a video showing you how to create a full-screen landing page you know where the image takes up the full screen no matter how you resize the browser and I've had a few requests asking how to do that with a video background and I recently also got a request from someone giving me this link to this code Academy page asking if I could build a layout like this now I'm not going to go through and build this exact this layout right now at least maybe I'll do that in the future but it did give me a good idea to try and recreate this this video background here because I think this looks pretty nice when they have the video like that very faint in the background it's not too you know in-your-face so what I did is I recreated this and it looks something like this now the video is different because I would imagine that the the video on codecademy is is copy written in some way so we're using a different video here and I actually got this from a site called video or video net which has some really nice free stock videos and you can see this has a 1920 by 1080 resolution it is an HD video it's not as nice as the one on code Academy but if you want you can go to like Shutterstock or something like that you can actually buy really high quality videos like the one you see here but we're just gonna use this one I think it's it's nice it's pretty good and it'll do alright and if we scroll down you'll see we have just some some other sections here but if I resize the browser no matter how I resize it you'll see that the video is gonna take up the full height and the full width all right so that's what I'm going to show you guys how to do today hopefully you enjoy this video and let's get started I want to give a huge shout out to today's sponsor male tag male tag is a Chrome extension that allows you to track your emails in real time for free it also lets you track other cool things like link clicks email reopens and even the device that was used to open your email be sure to check out male tag by clicking the link in the description below alright guys so what I have here is I have vias code open on the left and then my browser on the right so I have a folder called video underscore BG that's where we're gonna be building this project and the first thing I want to do is download the video okay and I'm gonna put the link in the description this is a free stock video and if you go to that link you can click on free download and you can see I already have it here but I'm gonna bring it into my folder which I have in here okay right here and I'm gonna just rename it to something shorter I'm just gonna call this let's say we'll call it code dot MOV alright you can see it popped up over here in my folder and this is like I said this is a really good site for stock videos if you want something more high quality you might want to look at like Shutterstock they have some really nice premium videos that'll run you about a hundred bucks apiece or something like that alright so now that we have the video downloaded let's go ahead and create our index dot HTML file and then we're also gonna need a style dot CSS file alright so let's start in the index.html I'm using Emmet so I'm just going to do exclamation tab you'll see me doing some shortcuts throughout the video that's because I'm using Emmet Emmet comes with vs code but if you're using something like atom or sublime text you'll have to install it separately if you want to use it alright I'm also using a extension called live server for vyas code which will allow me to open up my HTML file on my local host but of course you don't need this you can just open up your HTML file anywhere alright so let's go ahead and change the title here we'll just call this video background and by the way you might see a bunch of flies flying around me that this time of year is crazy I don't know about where you guys are but in Massachusetts right now flies are just insane I don't stink or anything are not dirty it's just they're everywhere they're at my wife's work they're in my car they're freaking everywhere and they're really aggravating but anyways I'm gonna go ahead and start up my live server here and you'll see that we just have a blank page because we haven't actually added anything so let's start with the mock up now I'm gonna put everything wrapped inside of a header tag and this header I'm actually going to give it a class I'm gonna give it a class of the - header and I'm also going to give it a class of container okay because we want everything to be contained into the middle rather than going all the way across and I'm talking about the content inside now inside the header we're gonna have another div and I'm gonna give this a class of video video - what do they call it hold on full screen video wrap so full screen - video - wrap alright and then inside here is where we're gonna have the actual video so we'll put a video tag for the source it's gonna be code dot MOV because that's why I called it it's also right in the same folder if it was inside of a subfolder then I would have to add that here as well all right but let's go ahead and save that and you'll see right away this pops up now that these these freaking flies now this isn't playing it's not going to play by default using the html5 video tag what you have to do is add in an extra attribute of autoplay okay we're going to set that equal to true and then I'm also going to set an attribute called loop and we're gonna set that to true as well because we wanted to keep playing we don't want it to just play once and stop so let's save and now you'll see it'll automatically start playing when the page reloads all right now underneath the fullscreen video wrap we're gonna have the overlay div alright so let's create a div with the class of header - overlay now nothing's going to go in here this is just we're gonna just style that with CSS underneath that we're going to have the content so we're gonna have a div with the class of header - content and then in here we'll have an h1 that'll just say hello everyone and you can put whatever you want in here and then underneath that we'll have a paragraph tag whoops we'll have a paragraph tag and I'm just gonna say lorem what do they do LARM 20 tab and that will give us just 20 20 words of dummy text and then under that we want a button okay it's not actually gonna be a button it's gonna be an a tag and I'm gonna give it a class of BTN all right doesn't matter where it goes and then for the text we'll just say read more all right so let's save that now we are gonna have those sections underneath but I'm not gonna worry about those just yet I just want to get the the video header part now notice the content right now is below everything but we're gonna set it so that it's actually over the video okay but all that's gonna be done with CSS so let's go ahead and link our CSS file so up in the head we're gonna put a link rel equals stylesheet and then the href will equal style dot CSS okay so now let's go to our CSS and from here first thing I want to do is put in an asterisk because I want everything all elements should have a box sizing of border-box okay because I don't want any issues with margin and padding and width and height a margin and padding should be included in the width and height for all elements all right and then we're gonna go ahead and add our body stuff so for body let's say we want margin zero for the font-family let's choose this I'm gonna choose a Segoe UI and then to home a Geneva verdana' sans-serif' and then let's see we want the font size look font size is going to be one REM okay we're gonna use REM units for most things in this project let's also set the line height I keep putting a zero there instead of the space line height we're gonna set that to 1.5 and then let's set the color of the text of the body to triple three and finally let's set overflow we're gonna say overflow dash X which is horizontal I'm gonna set that to hidden okay just to make sure that there's no horizontal scroll bars all right so that should be it for the body now we'll do the V header so class V dash header and for that we're gonna set a height of 100 viewport Heights now I explained this in my if you've watched my full-screen image landing page video viewport Heights and viewport widths you can basically think of like slices so no matter how big the browser is if it's resized or maximized or whatever think of the height as a hundred slices going this way okay now we want this header to fill up all of it so we want all 100 slices if we were to say 50 VH it would fill it up halfway okay we would fill up 50 of the 100 viewport Heights okay or of the slices so think of it like that if you've never used VH or VW before alright now we also want this to display as a flexbox so we're gonna say display flex we also want to align everything to the center vertically so for that we can say a line items center and then we're gonna set the color of everything to white since it's gonna be over that blue overlay all right now if I save this you'll notice that the text down here is gone that's because it's now up here but it's behind the video okay but don't worry about that just yet we're gonna fix that with the z-index property later on alright so now we want to deal with the container alright so the container basically is going to move everything it's going to move the content into the middle we're gonna add margin Auto and so on so for the container let's give it a max width okay we don't want to do just a width we want this to be responsive so we're gonna say max width is going to be 960 pixels I'm gonna add padding left of 1 R M padding right will also be 1 R M and then let's set margin I will say margin Auto and I'm also going to set the text align to the center all right and we'll save now notice the video got pushed over a little bit we're gonna fix that in a second so the video has a wrap and has this class right here full screen video wraps so we're gonna take care of that just move this up a little bit and we'll say full screen - I keep putting that zero this I'm trying to find keyboards that are silent because usually when I'm doing my regular coding I use a mechanical keyboard but it's too loud for most you guys a lot of guys complain about it so I'm trying to find the perfect quiet keyboard and they just all suck I hate them all so that's why you see a lot of typos and stuff like that so let's say full screen video - rap and we're gonna set and this one has like really small arrow keys which is kind of screwing me up but anyway for that we're gonna say position:absolute excuse me so position:absolute we wanted to start at the top left so top:0 left:0 and if i save that now you'll see that it moved the video up to the very top left okay next thing we're gonna do is say is make sure that the width is going to be 100% we're gonna make sure that the height is gonna be a hundred viewport heights so VH and then we want to set the overflow to hidden okay we want to make sure that there's no scroll bars so let's save that and it doesn't look much different all right now for the video itself we want to make sure that that is always 100% height and width so let's say actually I'll just copy this class here and we want to say the video element inside of that we want to set the min min width to 100% a hundred percent whatever and then min height to 100% all right now for the overlay which is the the blue you know the blue overlay that goes over the video that has a class of header overlay all right and for this we're gonna set the height that's also going to be a hundred viewport Heights and we're gonna set this to a position of absolute okay same as the full screen video wrap we're going to set top:0 left:0 we're gonna set the width that shape with the width right here the width is actually going to be a hundred viewport widths okay so it's going to cover the entire thing and then we want to set the background color or will just say background and that's gonna be - a hexadecimal value which is going to be 2 2 5 4 7 0 which is that blue color all right now if I go ahead and save this you'll see that it's actually gonna cover the video okay it's positioned absolute and it has height and width that's going you know all the way across all the way down but we want to be able to see the video through it so we need to add an opacity but before we do that I'm just gonna add a z-index of 1 just to make sure that it's always gonna be on top of the video all right the higher the z-index the closer to to you it is the the lower it is and you can do negative values as well the more far back it is so let's set the opacity of this and you can set this to what you want I'm gonna say 0.85 and save and now you can see the video playing behind it now if you wanted the video to be more clear you could should make this lower like you just you could say 6 5 and you can see now the blue is lighter and you can see the video better but I think that 85 is good because we want to be able to clearly see the text that's over it all right so now let's talk about the text now the text is in the right spot it's actually here it's just behind everything now remember what I was saying about z-index what we want to do is say header - content which is what has the h1 and all that stuff now we want to set that Z index to two okay because that's gonna bring it forward so let's save that and now we can see it okay it's not behind everything anymore all right so now let's style it we're gonna say header content h1 and let's set the font size for that there we go with the zero again font size we're gonna set that to let's say 50 pixels and then I'm gonna set the margin bottom let's at the margin bottom to zero and save and now we have a bigger header now for the paragraph so we want to say head our - content P I forgot the dot so head our content P we're gonna set - let's say we want the font size to 1.5 REM and let's set D I'm just going to set it to display:block and let's set the padding bottom can I set that to two REM alright save that alright now for the button or the link that has a class of BTN so for that we want to set the background so the background is going to be a hexadecimal which is going to be 3/4 be 300 or not o zero and then set the color of it to white okay let's set the font size to 1.2 REM let's set the padding so top and bottom is going to be one REM left and right it will be to REM okay and then let's take away the underline with text decoration set that to none and save and there's our button alright so that looks pretty good now when this gets smaller you see how there's not much space here we only have a padding of one REM what I'm gonna do is put a media query down here so we'll say media and we're gonna set this to have a max width of 960 pixels so whenever it's under 960 pixels I want to take the container and I just want to say patting rights set that to three Ram instead of one same thing with padding-left we'll set that to three REM excuse me and save and now you can see there's a little more room when it's under 960 all right so I think that's good yeah for the head or at least so if I resize this you can see that it's always gonna be a hundred a hundred percent of the width and height all right so now let's take care of the sections underneath so we'll go back to our markup let's go under the header and we'll put in a section I'm gonna give this section a class of section and also a class of section - eh okay and then here we'll put an h1 will just say section a and then underneath it we'll put a paragraph and I'm gonna say lorem 50 tab which gives us just 50 dummy text also I just want to wrap this in a container alright so container this should be wrapped around all of this it should be within the section though all right and then what I'll do is just copy this whole section paste it in again and just change this to Section B the class and also the text right here the section B alright we'll save that and now no matter what this is still going to be a hundred percent of the the height and width but if I scroll down we'll see the sections alright so let's go back to our CSS we just have a couple more things to add so for the section class which both of those have we're just going to add a padding of what did I do 20 pixels on the top and bottom zero on the left and right all right and then for section B I want that to have a dark background so we're gonna say B and we're gonna set the background say background to triple three and the color to white and save and there we go okay now this video you'll you'll notice has a quick pause I don't know if I mention that but when it's done before loops again it has like a two second pause if you get a better high quality video it shouldn't do that but again I didn't want to spend you know 100 bucks on a video just to make this tutorial so I think that's gonna be it guys I will probably create a code pen and put that in the description so you guys can can have this code feel free to use in your projects or whatever and that's it thanks for watching please leave a like please subscribe come and join our discord server if you want to go to discord GG slash traversing media we have a server where you can come you can you know share ideas and you can get help for any kind of programming and development we recently added a new channel where you can showcase user projects we had some we have some really good moderators there so come and join us it's absolutely free it's not only for patrons or anything like that and that's it so thanks for watching and I will see you next time so I just want to give another shout out to male tag who sponsored this video male tag is a free Chrome browser extension that allows you to track your emails in real time I've been using it myself for about a week now and I can't recommend it enough on top of email tracking mail tag has a bunch of other features like desktop push notifications that alert you when your emails have been opened link click tracking that shows that people have actually clicked on the links in your email and a ton of other cool features again all these features are completely free be sure to check out male tag and click that link in the description

Channel: Traversy Media

Views: 262,538

Keywords: full screen video, fullscreen video background, html css fullscreen video, html video, css video, html, css, html full screen video

Id: Xy3GlrddZFI

Length: 23min 37sec (1417 seconds)

Published: Thu Oct 05 2017