Hi there. In this video we're gonna do a video background,  but within a containing div tag  here, you can see this one here. Instead of being fully background, it's  inside this nice little like litter box shape here. And where you can see here is when I resize it,  you can see the video gets smaller, uh, and changes. Now this existing video is from a previous tutorial  where we built a site in Dreamweaver using Bootstrap. Okay?

So we're just gonna 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 tutorials,  is it's pretty much exactly the same bar, a couple  of little changes, okay? It's a lot more important where this goes. Okay? So we need to find out what div tag it's gonna go into.

And we looked at it there. It's that kind of like hero box. And, um, this website I'm looking at here, kind  of like just jumped into an old tutorial. I've done, if you've done my Dreamweaver bootstrap tutorial,  this is where we ended up. Okay? So, um, what we want  to do is I wanna find the hero box, okay?

And that's where I wanna stick in this, uh, video. And where does it go? You might  have to play around with this. Okay? Uh, it, it, it kind of depends on  how you've formatted your site. If you've followed me exactly.

It goes in between row  and this column large here, 12. But if you've done something, uh, different  with your design, which you probably have, you might have  to copy and paste this around. Uh, it might be  that it goes in the container just under the container  or just under the row or inside the column  or inside another diviv or section you've got. So just play around with it and it's like it was before. Okay? We're gonna put in video even, okay?

And then SRC for the source. Okay? Where we gonna get this video from? We're gonna click browse and I don't have one in the site,  but I've got my exercise files, okay. On my desktop under video. And that's the one that I made earlier in Premier Pro.

Okay? Design a 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 gonna make a folder called Videos. Great save. Cool. Nearly done. Uh, and we want, like,  before, we want this one to auto play  and we'd like it to loop please. Okay?

And we'll close off that tag video tag, okay? And let's check what that looks like in a browser. Hey, kind of works. That is just like how to add a video  to a page, okay? Not as a background. So let's do this next bit  with a better background.

Now to make this happen, let's jump into Dreamweaver. What we need to do is set it as a background  and we need to kind of give it, uh,  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, we'll, what you're gonna do is give it a class. Remember, class is something we get to add, okay? A name that we get to pick  and we can call this thing anything we like  stretchy background thingy.

Okay? Never call 'em this long. There's nothing wrong with it except, um, like me,  I have developer friends who end up opening my website  and kind of either laugh  or cry at how long some of my classes are. I'm in main dot CSS, okay? And what I'll do is I'm gonna put my,  near my hero box here, okay? 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 gonna add some of the things, okay? And this needs to be set position first of all. Okay? So the position is gonna be where we use fixed, okay? Uh, up until now.

Okay. In the other exer exercises. So let's have a look at fixed. It means it's always gonna be there,  which is a bit weird for what we want. We want it to sit inside this div here. So we're going to use the other one called absolute.

Now if we scroll, it'll 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 stretcher yet. So let's do that. And  that is like we did the full background video. Okay?

We put in a min width of a hundred percent  semicolon, okay? And a min height of a hundred percent semicolon. Okay? And then we put in the width  and height, remember, just because okay. Of auto, it's not gonna cause us any problems in this one,  but there are times when it does. So just stick it in.

So height and width are auto. Auto, okay, let's have a little look  and it's kind of working. We're getting there. Okay? It's stretching the whole, uh, yeah, the whole height. Okay?

So there's a couple of things we need to do. First of all, we need it jammed up in this corner, okay? 'cause 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 for yours, okay? So this is optional.

Mine definitely needs it. So left, I'd like you to be zero pixels, okay? So it's gonna be all the way in the left. And then we're gonna set the top to the same zero pixels. There he is there jammed up in the top. Now what we need to do is kind of like get him to,  so he's doing everything we want.

He's resizing, he's, he's responsive,  but he needs to be jammed  and know what the, um, the div tag  that he's inside of is doing. And we need to do this by the container div. Okay? The container div is this hero band. Okay? If I look in here, yours might be different.

Okay? This is the one here. I'm kind  of like sticking him in inside of. So what I want to do is I wanna tell this thing here. I, you, my friend need to have a position of relative,  he gets told to be relative. This guy uses that as his basis.

Okay? And we've got a responsive backgroundy thing, okay? And that is it. Okay? If you wanna just go from instead of a full background  to just one inside of here. Okay?

Now, um,  and for us, uh, one thing we didn't have to do  and you lots of examples, your will okay, is you might have  to play around with the C index. So you might have to set this, depends on, yeah,  it really depends on how you wanna work it. But say the stretchy background might have to be set to a  Z index of maybe minus one or minus a hundred. It doesn't matter as long as it's below zero. Okay? And you might need to do that.

And  what happens in my case is that it set it behind the,  that the guy over here, okay, the band hero is now at zero. So this guy's 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 probably just delete this Z index  'cause it doesn't look like I need it,  but I could do minus two pixels, okay? Is, uh, not pixels, okay? Just minus two and then behind that, okay?

If the video doesn't load on mobile screens, okay,  it will load the background image. Okay? That's pretty cool and pretty simple. You my friend now are a background video expert  and that's where we'll leave this video.