🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

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

This lesson is exclusive to members

Questions

0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread

Course info

15 lessons / 2 hours

Overview

Hi there, I’m Dan. In this course we’ll learn how to create and edit a video for our website. Then we’ll go and build the site from scratch. It looks fancy, but it’s not particularly hard. 

I built this course for beginners. You do not need to know how to code or how to edit video to take this class. We’ll start with the super basics. This could totally be your very first website, wouldn’t starting with a video background be a super cool first project?

We’ll go through the full process. I’ll show you where to find some video, I’ll show you how to edit it in Premiere Pro. We’ll do cool video effects like blurs, tints and transitions. I’ll show you how to export the video so we can get the file size super small. Once we’ve created our video we’ll build a basic website together and make our video all cool and full screen. 

We’ll also create a second option where the video peeks in through a specific box.

In this course I’ve got exercise files so you can play along. I’ll also save my files as I go through each video so you can compare yours to mine - handy if something goes wrong. We’ll be using Dreamweaver & Premiere Pro but 95% of this can be done in generic web & video tools. 

Remember: I’m happy to help & I’m pretty handy with replying. Also - there is a handy cheat sheet you can print out, plus there are teacher resources if you need them. 

The best thing - is that it’s not that hard. But super awesome video background will impress the heck out of your clients. 

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe .

  • It will be handy if you know some basic HTML before this course. It’s focused more on video backgrounds and not the entire web design process. 

What am I going to get from this course?

  • 15 lectures 2 Hours 18 minutes of content!

  • You'll learn to build a website with a video background.

  • Pros, cons & cool examples of video backgrounds. 

  • How to edit your video in Premiere Pro. 

  • Where to get video. 

  • Basic editing, adding texture, fading, texturing, blurring, coloring. 

  • Premiere or After Effects? Both?

  • What size should it be. HD? 4K? 

  • Minimising file size

  • Exporting in the right video format

  • Media Encoder. Webm, mp4, ogg, ogv. 

  • How to create a basic website. 

  • Add fullscreen background video

  • Add a background video to a hero box. 

  • Integrating with an existing Bootstrap website. 

  • Make the site responsive. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. While no previous Dreamweaver experience is necessary, it would be good to do one of my other intro courses before attempting this course.

  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration 2 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025