Adding a fullscreen background video to a website using Dreamweaver

This lesson is exclusive to members

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

Hi everyone, in this video, we're going to put in a video, and make it do this. Look at it. That’s the goal of this video. Let's go and jump into Dreamweaver, and get started.

First thing to do is to create our page, so let's go up to 'File', let's go to 'New', then I'll click 'HTML'. We're not going to be using Bootstrap in this case, we're going to set it as 'None'. Let's give our document a title, and this is going to be 'BYOL Design Agency'. 'HTML5', and let's click 'Create'.

Next thing to do is to save the file, so let's go to 'File', and 'Save'. It's defaulted to the right folder, so there's my 'BYOL Website' folder. And this is going to be the home page, so it has to be called 'index', lower case 'i', no spaces. Remember, our home page has to be called 'index', and that's the page that gets loaded first on any website. All subsequent pages can be called anything you like as long as there’s no space. You have to use hyphens, or underscores. Click 'Save'. You'll see over here, there's my little folder structure, if you don't have it, you might have to twirl this down, there’s my images, and there is my HTML document.

So a quick look on the desktop, there it is there, my images folder with nothing in it, and there's my index page. Great! Currently our index page doesn't have a whole lot, so let's go and add our video to it. So, to add a video tag, we need to do it to the body, not the head. It's everything that users don't see, but it's kind of what Google uses, and the browser uses, so this title along the top here, we don't see it, it's just used in the top tab, on the browser, and Google also uses it to list your website. This just tells it what kind of keyboard, and characters that you're using, and we're using Latin letters. 

So, body is everything that the user sees, and at the moment there's nothing there, so what we're going to do is put a 'return' between the two, we're going to tab it along. No reason for the tab other than it makes it look nice and bounces it out, and makes it a little easier to work with. And we're going to put in our video tag.

So my video tag is open angle bracket ' < ', type in 'video'. You can see it has a lot of hinting, you can see Dreamweaver goes-- I've typed in ‘vid’  and it’s kind of gives "Do you mean this?", and often you just hit return on your keyboard, and it will fill it in. We're going to close that off with the angle bracket '  > '. Then every tag needs an opening and a closing, the body has an open, and that has a forward slash '/close’. The head has an open, and a close, the HTML has an open, and then down there, there's the close. So video is the same. To close it off, we need an angle bracket ' < ', and then it's this forward slash '/', you can see it on these guys here. When I type forward slash, Dreamweaver's clever, and says, "You probably mean to close the tag off," and it just finishes it in there for you. So that's how you add a video tag.

Now, you need to tell the video tag what video to play, and you do it by adding a 'source'. So, just after the word 'video' here, we put in 'src', and you can see, it defaulted to it.  If you hit 'return', it fills in the rest of the equals, and the quote signs; Awesome! You'll also see you get this ‘Browse’, so when I click on 'Browse', and at the moment, I've only got my images folder, and I've got this index. Ignore this '.ds', it's a Mac thing. So what we're going to do is go and find it from the exercise files. It's on my desktop, there is the video background exercise files, there's one here called 'video', and this is the one that I'm using for the full background, so there's this one, full background, and then there's the little letterbox version. So, I’m going to use this one, that's the original. Let's click 'Okay'. It kind of says "This file is not in my current local site." This means-- remember, we've only got images and index, and Dreamweaver knows that for a website to work, all files need to be in the same folder. So I'm going to go through. "Would you like me to copy it then now", and you'll say, "Yes, please." Awesome!

And you could just dump it in here into your index file, but that would be really common to go to 'New Folder', put in 'videos', click 'Create'. I'm going to put him in there. Now, your file format is being done in the previous videos. One thing we didn't cover hugely-- just making sure that you've not got-- you couldn't have this. You couldn't have designers space full space background. 'designers full background'. You'll end up with errors, and the browser can't find it. You need to use hyphens or underscores. It doesn't matter which. Uppers and lowers are fine, but do some basic syntax there. Great! We've added a video. And, let's go and check that thing. What we're going to do is preview it in a browser, so we're going to use real time browser preview, and at the bottom here, this is how you get to it, and you can preview it in all  the different browsers, Google Chrome is by far the most common. If you don't have it installed on your machine, go ahead and install it, and it will appear in this list. If you’re on a Mac, Safari; if you're on a PC, you probably got Edge, or Internet Explorer, but definitely test in Chrome, that will be your basis, because so many people have Chrome compared to all the rest of them.

Okay, save this please. What happens is, on my one, it ended up on my other screen , I work on two screens here at the office. Before we look at the video-- and what ends up happening is, see this video here, we're going to toggle in this class, between this, back between the video, back between this, back and forth, just because we're stuck to one screen for this video. But when I'm working, what I do is, I have this up on another screen, and I'm testing it there, and it updates live, so it means that I have to switch between the two edges. Update the code, and it updates on this other screen here, but, gives you a good excuse to go and buy a new monitor. They look awesome with two screens up.

So, where is our video, it's there, I can see it, nothing is happening though, so there's a bit of syntax we need to add to this video to get it to do things. So, there's a bunch of different things you can do, we're not going to cover every single one of them. Let's go and have a look, and see what other things you can do with the video, but the basic, the one we want is-- can you see, if I put a space in, just after video, Dreamweaver's  really handy, and gives you all the things that potentially can be applied to the video, so, some of that makes sense. So there's things like 'autoplay', that's what I want next, but there's also things in here, like 'controls'. If I turn that on, and then I save it, and I check in my browser, I've got these controls, and these are just standard HTML5 controls.   

So, the control is not what I want, because I don't want that for the background video, I want 'autoplay'. Let's go back to-- put an 'o', put in a 'space', and it gives me these; 'autoplay'; Lovely! So now if I save, preview it in my browser, look at him, he autoplays. Cool! So HTML5 video is pretty easy, there's no plug-ins, just works with nearly all modern browsers. You can see, in this case, it gets to here, and then stops, and waits forever. Remember, it might not be what you want, but you don't have to add any other syntax to it. You might just want it to play once, and sit there for the rest of the video. It's just kind of the end frame, it might be a call to action, or you're happy for that to do it. I want mine to loop. Okay. You're probably going to guess it, just add the word 'loop'. Too easy. 

Now this thing is going to loop on forever. You just have to trust me; we're not going to watch it again. So that thing will keep on looping. And anything else useful in there, and there's mute, so if you got sound on yours muted, my advice is to go and re-render the video, and code it again with the audio off, it will save you a bit of file size. Get lazy, or you don't want to do that, or you've just jumped into this tutorial just to do videos, and you want to mute it, just hit 'mute', it's fine, we don't need it, because we got no audio in our track, or on our video; we don't need it.

And have a look at some of the other things, those are the main ones we want. There's couple of other things we're going to do later on, but that's the basics for getting it into the HTML. Now we need to make it full screen, and that gets done not here in the HTML, but in our css. So I'm going to hit 'Save', We're going to create our first css document. Now we're not going to cover a huge amount of css in this course; a few of you are brand new, and you are like, "Man, I don't even know what a css is." Go off to one of my other courses, there's a lot of details into css, but we're just going to be quick in this one. 

First of all, is create a css document, so let's go to "New', and 'HTML', 'CSS'. HTML's, they get the things, they're core concepts, on the page, they type the images, and the videos, the css is what you do to style them, tell them what to do. So we're going to tell the css to stretch it, and be-- well, we're going to use css to tell the video what to do, we're going to tell it to be full screen. So click on 'CSS', click 'Create'. We got a separate file here, we're going to save it, and it's going to go into my same file. Some people put it into a folder called 'CSS', I don't, stick it here, call it anything you like but pretty much everybody calls it 'styles.css'. And that's what a css document looks, like brand new. 

I'm going to close it down, because what we're going to do, is we need to close it down-- remember they are two separate files, you can see that in here, this guy, and this guy, they don't know each other exists. What we need to do is connect the two, and we do it by-- in this HTML, in the 'head'; remember, the head is where the instructions of the page go, and this is-- the body is the thing that's actually up here on the page, so down here, in 'Title', we say-- we're going to add the link to the css, now this is a long one, so what we're going to do is, we're going to use a little trick. So instead of putting in all the syntax to link your css documents, we're going to use a little shortcut in Dreamweaver, and if you type in 'link'-- If you press 'return', there's nothing, but if you hit 'tab' instead, watch this; Awesome!

So instead of having to type angle bracket link rel equals stylesheet, href equals '<link rel="stylesheet" href=', all of that can just be done with a 'tab'. Same with this video tag, we did this earlier on where we typed in the beginning and the end, I put in another one, just underneath, just to give you a bit of an example. I've never typed in video source equals, 'video source=' I type in 'video', hit 'tab', you'll see it puts it all on there for you, so I'm going to do that. It's all in under shortcuts. Awesome!

So where is it going to link to? It's in this h-reference, this is the hyperlink reference, and where's that going to go to, we're going to start typing-- If I delete that, and put it back in, for some reason, some times, when you're using that little trick, it doesn't load these little preloaders, so sometimes what I do is, I just delete the first quote, put it back in, and that kind of comes back to life. Sure it’s a bug, I'm sure it will disappear. And what I'm going to do is, I'm going to-- I'll type 'styles.css', that's the file that I'll look into, and you can see at the top here, this changed, this is the related documents bar, and this is-- instead of having two tabs open, you kind of go like two different tabs, and just link to it. Now, the HTML and css are married. They are connected. Cool, that's all I need to do to connect them up at least.

 

Now we need to go and add some css to style this video. So let's go and style it in our css. Let's click on 'styles.css' on the top. Now we're going to put in our first bit of css. So what we could do is, we could go in here and style the video tag. That was the name given to it over here, so it starts exactly the same video, and over here I can start styling it, and I put in my curly braces '{ }', and then I start styling it, and that's fine as long as you've only got one video per whole website, which is unlikely, well, it might not be, like for my video tutorial site, there's millions of videos. So styling this tag is going to affect all of them, so all videos on every page is going to be this full screen thing, and that's not what I want. 

So what I'm going to do is, I'm going to be a bit more specific. What I mean by that is I'm going to add a class, and a class is something I get to create, and I get to add it to the things that I want it to apply to, and a class is something that I get to write, I just need to make sure it's got a period '.' at the beginning, or a full stop. I’m going to call mine 'fullscreen', you can call it anything you like, just no spaces. And I'm going to copy the words, because my spelling is terrible, and then I need to go and apply it, so I'll put in my curly braces '{ }' just to get started, all the properties for css need to go inside these curly braces.

So to connect these two up, I need to go to 'source', and I need to-- because at the moment it's just called 'video', and it has no connection to that full screen thing I just made, so what you do, just after the word 'video', put in a 'space', you start typing 'cl' for class, hit 'return', puts a little syntax in for you, remember the equals and quotes might have to be in there, and you can see, even how helpful Dreamweaver is when it says, "Did you mean full screen?" I said, "Yes, please." You'll notice that you don't put in the period here. So even though I copied mine to go and paste that in, I didn't need to, because Dreamweaver's super helpful today.

So, that connects the two up. So they're doing stuff together. Now I need to tell it what to do. And to make this thing work, we need to do a couple of things; the main ones is minimum height, 'min-height', and minimum width, 'min-width'. So I've typed in 'min', and then hyphen, ' - ', you can see, these are all the things with 'min' in it, so I do 'min-height', and the colon ' : ' goes in there automatically, and we've put in a 100%, not surprising, and then we put-- we always end our css properties with a semi colon, ' ; '. I'll do the 'min-width' as well, so I'm just typing in, and using my arrow keys to go down, hit 'return', '100%', 100% semi colon, '100%;'. And let's go and look where that gets us. It's not finished yet, but let's have a look. 

Pretty cool! So, a stretchy video. And one of the things with minimum width is that-- can you see, it gets to a minimum, that's the original 500 pixels I've got, and that's just one of the-- not bugs, just one of the things we need to live with at the moment with the stretchy background thing, and if this is the future, what you want to do is-- say it's a year or two from now, you want to go and check out something called the object fit, and the-- the thing is called cover, and it does a really cool easy thing where it kind of stretches out to the background, you don't have to do this minimum width thing. Problem is that it's not used by loads of browsers at the moment, so it's not that practical. It will be, in a few years, you may go and check that, you might find something like object fit versus minimum width, and just check if it works.

So, my one here, nice and stretchy; awesome! But there's the few things, like these scrolly bars here, and there's some white gaps in the edges, let's go and fix that in Dreamweaver. One thing I didn't explain, and I'm just thinking, is that, in the minimum width, if I make this like a 4K movie, it's actually going to be huge, the minimum is going to be 100%, and probably beyond the screen, so it's never going to resize, it's just going to be out there at full screen, and that's fine if you want that. Mine is only just the top left corner, because this image is so big, it's off the screen, and it won't get any smaller than it's minimum. In our case, I've made mine 500 pixels, and it's a bit of a gift, and it keeps the file size smaller. Hopefully that explains it better.

So in terms of minimum width, there's a few other things I need to do. The first is, I'm going to make the width and height 'auto'. Why? Just because. And there are cases where-- it's not going to make any difference in our case, the video's going to look exactly the same. But there are cases where this is needed, so just add it, doesn't cause any harm, and we'll help you in certain circumstances. Now, other things we can do, is we want to get rid of these scroll bar; see the scroll bar outside here? Let's look at something called 'position'. You can see the options here. We're going to look at two of them. We're going to look at 'absolute', and 'fixed'. So we'll look at 'fixed' first. And what I'll do is, I'll show you a couple of examples I've got; just kind of made. So this is kind of the finished site. Obviously we're not here yet, but this one here is set to 'fixed', so we talked about 'fixed', and the other one's going to be 'absolute'. So 'fixed' allows us to do this. I've added some notes to copy here, just blank copy. You can see the video is fixed to the background, doesn’t go anywhere. Where's 'absolute'? It's there, but watch this. When I scroll down, can you see, it stays where it is. And there's uses for both cases, so it's easy to switch. In this case, with us, if I go to 'fixed',  and I preview it in a browser, and I'll close down these two that I made, these examples. It doesn't really matter because I don't have any content on my page, so I figured out I'll show you that way. So we're going to leave ours as 'fixed'.

The next thing we're going to do is, we're going to put in a 'top position' of zero pixels, and a 'left position' of zero pixels. That just gives a kind of a point of reference for later on when we need to put in   images over the top of it, if we don't have it, it won't work, it's not going to notice any change now, so just stick it in because I said so. Let's have a look at it though. 'Save'. Let's go in and have a little look. And when I say that it didn't make any difference, it is actually. You can see in the top here, it's actually-- there's a bit of default that comes along with the body tag, which pushes it down from the left, and-- sorry, down from the top, and little bit off from the left, so it's cleared up the little white border that was there. We didn't see it before-- we probably did, but I want to make it clear. You can see, white border, you might not have noticed it, but he's there. This forces it up on to the top left corner. Lovely.

All right. That, my friends is a squiggy video background thing, and it's a really small file size. So this gets you kind of part of the way, right? We'll leave this video here. Next video we're going to look at adding typo over the top of it, because that's another thing, not as-- it's easy enough, but let's go and do it together in the next video..

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024