Add background video to a specific div tag box on your website

Hi there, in this video we're going to do a video background, but within a containing 'div' tag here. You can see this one here, it's in a big fully background, it's inside this nice little letterbox shape here, and you can see here, when I resize it, you can see the video gets smaller, and it changes. Now, this existing video is from a previous tutorial where we built a site in Dreamweaver using Bootstrap. So we're just going to jump into the end of that one, and jam this video in the background.

Okay, so the cool thing about this is that if you've done the previous tutorial, it's pretty much exactly the same, bar a couple of changes. It's a lot more important where this goes, so we need to find out what 'div' tag it's going to go into, and we looked there, it's kind of hero box, and this website I'm looking at here, I've just jumped into an old tutorial I've done, if you've done my 'Dreamweaver Bootstrap' tutorial, this is where we ended up. 

So, what we want to do is, we want to find the hero box, and that's where I want to stick in this video; and where does it go? You might have to play around with this. It kind of depends of how you formatted your site. If you've followed me exactly, it goes in between 'row', and this column large, 12, 'col-lg-12'. But if you've done something different with your design, which you probably have, you might have to copy and paste this around. It might be that it goes in the container, just under 'container', or just under 'row', or inside the 'column', or inside another 'div', or 'section' you've got, so just play around with it, and it's like it was before; we're going to put in 'video' even, and then 'src' for the source, 'video src'. 

Where are we going to get this video from? You can click 'browse', and I don't have one in this site, but I've got my exercise files, on my 'Desktop', under 'Video', and that's the one that I made earlier in Premiere Pro, 'Designer's hero box'. Click 'Open'. It's not in my current site, would you like to copy it? Yes, please. Where would I like to put it? I'm going to make a folder called 'Videos'. Great! 'Save'. Cool, nearly done. And we want-- before we want this one to 'autoplay', and we'd like it to 'loop' please, and we'll close off that tag, video tag, and let's check what that looks like in a browser. Hey, it kind of works.

That is just kind of adding a video to a page, not as a background. So let's do this next bit with a better background. Now to make this happen, just jump into Dreamweaver. What we need to do is, set it as a background, and we need to give it-- we could use the 'video' tag, but again, if we use the video tag at other places of my site, we might end up setting every single video on this website to a background, and we don't want to do that, so what we're going to do is give it a 'class'. Remember, 'class' is something we get to add, and name is what we get to pick. We can call this thing anything we like, 'stretchy-background-thingy'. Never call it this long, there's nothing wrong with it, except-- like me, I have a developer friend who ends up opening my website, and kind of either laugh or cry at how long some of my classes are. 

I'm in 'main.css', and what I'll do is, I'm going to put the name of my hero box here, so just underneath, remember, period at the beginning, and then paste it in for a 'class'. Curly braces, ' { }', and inside of here, this is where we're going to add some of the things. And this needs to be set 'position', first of all, so the position is going to be-- rem we used 'fixed' up until now in the other exercises, so, let’s have a look at it first. It means it's always going to be there, which is a bit weird for what we want, we want to sit inside this 'div' here, so we're going to use the other one called 'absolute'. 

Now, if we scroll, it will go up and down with the page, and you can see, by positioning 'absolute', it's actually tucked in already behind this, it's not quite up in the corners, and stretchy yet, so let's do that, and that is like we did the full background video, we put in a min-width of 100%, semi colon, 'min-width: 100%;', and a min-height of  100%, semi colon, 'min-height: 100%;'. And then we put in the width and height, remember just because of 'auto'. It's not going to cause us any problems in this one, but there are times when it does, so just tuck it in, so 'height' and 'width' are 'auto, auto'. Let's have a little look. It's kind of working, we're getting there, it's stretching the whole height, so there's couple of things we need to do. 

First of all, we need it jammed up in this corner, because it's missing out, it's using this, it's got some padding in this box here, so we need to force it up in the corner. You might not have to do for yours, so this is optional. Mine definitely needs it, so, 'left', I'd like you to be zero pixels, 'left:0px'. So it's going to be all the way in the left, and then we're going to set the top to same, zero pixels, 'top: 0px'. There he is there, ends up on the top. Now what we need to do is kind of get him-- so he's doing everything we want, he's resizing it, he's responsive, but he needs to be jammed, and know what the 'div' tag that he's inside of is doing, and we need to do this by the container div. 

The container div is this hero band. If I look in here, yours might be different. This is the one here I'm kind of like sticking him inside of, so what I want to do is, I want to tell this thing here, you my friend need to have a position of relative, 'position: relative'. He gets told to be relative. This guy uses that as it's basis. And, we've got a responsive background, neat thing. And that is it. If you want to just go from, instead of a full background to just one inside of here.

For us, one thing we didn't have to do, and in lots of examples you will, is you might have to play around with the 'z-index'. You might have to set this, depends on-- really depends on how you want to work it, but say this stretchy background might be have to set to z-index of maybe, -1, 'z-index: -1', or -100, doesn't matter as long as it's below zero. And you might need to do that. What happens in my case is that its set it behind that guy over here, the band hero is now at zero, so this guy is behind it, and the band hero actually has an image on it, so we can't see the video, so what we have to do in our case, is-- I'll probably just delete the 'z-index' because it doesn't look like I need it, but I could do -2 pixels, '-2px', not pixels, just '-2'. And then, behind that, if the video doesn't load on mobile screens, it will load the background image. It's pretty cool, and pretty simple. You, my friend now, are a background video expert, and that's where we'll leave this video.