Transcripts
1. 01 Introduction Video Backgrounds: Hi, my name is Dan, and in this course, what we'll do is we'll create a video, then we will go and build a website, and add a video as the background. It looks really fancy, but it's pretty easy to do. I built this course for beginners. There is no need to know how to code or work with video before, I'll start right at the super basics. This could totally be your very first ever website. It would make a pretty awesome first website. We'll go through the full process. I'll show you how to find some video, we'll go through how to edit in Premiere Pro. We'll do cool video effects like blurs, and tints, and transitions. I'll show you how to export the video so you can get the file size super small. Once we've created our video, we'll go through and build a basic website together, and make our video look cool and full screen-like. We'll also create a second option with the video picks through a little specific box on devs. I'm also happy to help. I'm pretty handy with replying to the comments that are on the different pages. Reach out, I'll give you a hand. There's also a cheat sheet you can print off, keep yourself going, and if you're a teacher, there's a few teaching resources available as well. The best thing about it? Is it's actually not that hard, but the end result is pretty impressive. So how about it? Me, you, and a few videos and we'll go make some Internet magic together. Yeah, but I think I said cool and awesome about a 100 times in this intro, that gets a new record.
2. 02 Resources & what is covered in the course : Hi, there. Let's talk about the thing that we're making and the resources I've got. First up is what we're making is it's going to be a video background with text and images, basically a whole website over the top. It's not going to be like those little embedded videos like YouTube or Udemy with play buttons and those sorts of things as part of a website, it's definitely like an abstract background, like a big effect in the background and the website over the top. We'll also make the actual video rather than just skipping to making the website, we'll show you how to really get that video nice and small edit, fix, all that stuff, and Premiere Pro. The same techniques work in After Effects, but we're going to use Premiere Pro in this one, so we'll do that and I'll just skip to the website end. Now, there are exercise files, so you can play along. There'll be a link on this page, you can download them and play along with the videos. There's also something called the completed files. It just means when I get to the end of every video, there's about 15 odd in this series, but at the end of the video, what I'll do is, I'll save my project, I'll code that I'm up to write in, so that if you're having problems trying to keep up or something's not quite working the same as my one is, you can download that completed file and just check yours versus mine, and let's see where you might have gone wrong, so there will be a link on this page as well. When you finish, could you post your project? Just on a link somewhere on the page, some way of getting in contact with me, or screenshots. It doesn't have to be a full working site. I just want to see what you've done. I mentioned you'll be really proud of it, because when you are new to it, it's a lot more harder work, but I like to see it as a teacher. I like to see what you've done and just it's good for other people to see how you've done it and adapt to the course, so post your projects. The other thing I'd really like you to do is to give me a review. It's a bit early in the video to be telling to me, give me a review, but depending on different sites, they will pop up early, sometimes late at the end, about offering a review. Just so you know, those reviews is how they measure the success of a course, you might get to the end, a lot of people get to the end and or rather [inaudible] do I rather review, and that's fine too. But if you do post a review, honest, I don't want anything about honesty, but those sort of things helped my rankings and my course might do a little bit and bring me a little bit more revenue for me as a teacher. This course, I've made a cheat sheet as well. There'll be a video version and a printable PDF version. There'll be a link on the page too, those cheat sheets. So you can go off and print them off and stick it up next to your computer just so you can, when you're new, getting used to things, share those things as well and make them to share around. So post them and share them if you like them. Last bit is, if you're a teacher, watching this to teach it, you got a class tomorrow and you've got to teach video backgrounds, I've got teacher resources page where you can get printed notes, watch these courses, do the printed notes, check that out as well, there'll be a link on the page, there's lots of links on this page. That's it for resources and things that we're going to do in this course.
3. 03 Cool examples of full screen video backgrounds on websites : Hi, there. In this video, we're going to look at cool places to get examples of full screen background videos and this is probably the best site that I use. It's called Awwwards, but it's got dub-dub-dub, so it's the dub-dub-dub awards. There's lots of stuff in here and KenTen's inspiration. The easiest way is, see this search in the top left? You can just type in video, put in background and it will search through its vaults for all those. Then what you do is you open up a bunch of them, just have a look. To open them. If you hover above, can you see this little arrow here? That will open up that website? Okay, I know. What you can do is you can click on it and it jumps to that page. [inaudible] If you hold down the command key on a Mac or control key on a PC, before you click it with your mouse, watch this. Can you see they open up in a separate tab. I like doing that, I like just going through, go and click, click. Just opening up a bunch of them. Okay. yeah, just going through and see what you like and use looking for, I guess, inspirational videos, styles, how they've made them washed them out or different effects. Yeah, just to get your creative juices flowing. Now watch out for like see this guy here, see the little speaky thing here. He's playing music, northy. Don't ever do this. Okay. Don't have sound going by default. Okay. Because you get punished by being turned off and not watched. Yeah. So you just looking for it now. The thing is that some of them are a bit old. You can see that this doesn't seem to have the video playing anymore. Okay, so pay, that's not. Oh, another one with sound. Go away. All right, so close these ones down, that's it. That's how to find really cool background videos. Now the site here, doesn't just obviously do video sites. I love the site, it just has really cool stuff and it gets sites of the day and just beautiful web design ends up on this place. So you don't have to just use it for our video stuff. I use it for all sorts of things. All right. I'll see you in the next video.
4. 04 Where to get video for your background : Now we're going to start making the videos before we go and start coding it. If you want to get straight into the coding, you can skip this section. Now whether you get your videos from, obviously, you can shoot yourself. It's coming more and more easy. I shoot a lot of my stuff. But I also do what's in front of us here and use things like Stock Library pre-made footage. That's the one I'm going to use for this tutorial. Well, it is footage that's been made by someone else and we can buy it. The costs are actually pretty good, like getting a video from here, either this site, Adobe Stock or from iStock. They seem to be one of the most popular ones. They're going to cost you between about $50 and $200, depending on the video. What I've done is I've gone and picked one from Adobe Stock. It's just like designary one, it's more a photography one but I quite like the old designing units about it. Once you've picked it, you can right-click and save it. Or if you're using Adobe Libraries, which are awesome, you can click on this and download it to either your library or download it to your computer. There's a couple of options if you know how to use libraries, otherwise, just hit download and just save it to your desktop. That's the video that we're going to use. Now if you've never used Adobe Stock and you want to, and you're going to go try it, I'll put a link up on the screen here. There he is. I'll put a link in the notes down the bottom here. It's nothing other than, if you go to the website using my link, I get a little baby commission for sending you to them. You can go directly to the site, it's stock.adobe.com. But if you want to help me out, click that before you go. It doesn't cost you any more. Great. Now that we've got some video to work with, we're going to do some basic editing and getting it ready for our website. We're going to use Adobe Premier. So let's go and load that one up.
5. 05 Setting up your video background & basic editing in Premiere Pro : All right. Hi everyone. In this video, what we're going to do is do some basic editing in Premiere Pro. We're going to make this. At the beginning of my timeline, hit "Space bar". It's going to fade in. I'll flip that upside down. This thing plays, it goes for about 15 seconds. It plays, and it dips to black. Let's go do that. All right, now it's time to make our video. What we've done is we opened up Premiere Pro. Now you can do your video editing and anything you like. Especially for video backgrounds, we're not doing a whole lot of things. In our case, we're just going to get something that loops, so we're going to use Premiere Pro. If you're more at home with After Effects, it'll do the exact same job for what we need it for now. What we're going to do is we're going to create new project. This window opens, we're going to give it a name. The top here, I'm going to call my Designers Background. Location, let's give it a place to live. I'll put mine on my desktop. I'm going to put it in a new folder. I'll going to call mine, Premiere Pro- Designer Background. Great. Click "Choose" and don't worry about any of this other stuff. Let's just click "Okay". Great. We're in Premier Pro. Now for you to follow along, just make sure you're under Window, Workspaces, you're on Editing. If yours still looks different from mine, go down to one that says Reset Save Workspace, and it's going to reject and look like my one. Now, Premiere looks daunting. When you open it up, people get scared off. It's not actually that hard. It just looks like it should be, but it's not. We're going to import our video. Let's go to File Import. Import. Now, this is not going to be a full tutorial on how to do everything in Premiere Pro. I've got another course for that. It's like a corporate video editing thing, so go and watch that one if you want to do a full set of it. This is just going to be the quick version to make our videos, get them nice and small, and then get them up onto our site. File Import and check out the exercise files if you haven't downloaded them yet. I've downloaded them. This is the Exercise files. Then in here what I'm looking for is video, and we're going to use this one here. I'm going to import it in. It's the one we got from Adobe Stock. Let's click "Import". Great, so we've imported our video. The first thing we need to do is create something called a sequence. A sequence is just like the page in the document. You can't just have a video sitting around. It needs to go on something or in something, a container, and that's called a sequence. Like a page in a document, we need that page to stick our words on. You my video are the words, kind of. To do a sequence, File, New, and you could go to sequence, but it's a lot easy because then you've got to try and guess what the sequence should be. You got a sequence and you're like, "Holy moly, which of these settings should I use for my sequence? It gets a little bit confusing." The easy way is to right-click it and say, can you see here? It says New Sequence From Clip. The cool thing about that is, it will use all the settings that have come from that video and create the sequence, and dump it onto my timeline. This little icon here, see this one here? That is my sequence. This is the video that I have imported. What's happening is, they got the same name which can be a little confusing when you're starting of, that is the holder, and that's the video that is stuck on the timeline. There is my sequence, and that's the video that's on there. I can now have one sequence, and I can keep importing lots of videos and keep adding them to this timeline. I could have 10 videos in one sequence. Remember, this is the basics. Hit "Space bar", it'll start playing it. You can see my little guide there. You'll notice that mine has the Adobe Stock through the middle here, is because I haven't paid for this yet, mainly because if I buy it and seeing that out with these class files, I'm pretty sure I'm breaking loads of laws and I'll get in trouble. I'm just going to use the placeholder one, and it's easy to go of and obviously pay for it, and you might be working the same sort of way. You might be working with a client, you can go through and mock up maybe three different backgrounds using this mocked up version with the Adobe Stock, and when a client picks one, then you can go of and pay for it. It's really easy to update here in Premiere afterwards. There's my video. It lasts about how long? It lasts about 15 seconds. Now, let's say I want to trim it up, it's quite easy, either at the beginning or the end, all you do is hover above your mouse. You can see I can drag this in, and it trims it up. It hasn't deleted it. It just kind of trimmed it. It's still here, look. Hello. But I can just trim up the ends here, and I might trim at the beginning, and move this along to the beginning. What I've done is, I've cut it down by a few seconds. It's up to you and your clip. Now, how long it should be? It's totally up to you, but the longer it is, the file size gets bigger. Maybe you might do a quick run through and just see how bigger the file sizes are. File sizes are getting big when they get close to 10 megabytes. They are small when they are one megabyte. If you've got something that's 30 seconds long, it's going to get up there in terms of the file size. I'm going to use this nice little short one. The cool thing about this one is, I'll hit "Undo" a few times, is that, undo a bit more, not too many, is that it's got a nice kind of loop. I don't need all that last seconds, because his hands goes off. This bit here, I might trim off just because I can't see the hand anymore, so it doesn't really matter. The stance goes around, loops. Great. Say you want to get rid of the bit where he started writing. I just want to get to the bit where he just starts moving. I'm going to slice that bit out. What I can do is you're going to use this tool here. Your tool bar is in this middle chunk here, and the one you're going to use is this thing called the Razor Tool. His job is, watch this. My play head there, I click him, and I've kind of sliced it into two pieces. I'm going to go back to my selection tool, and you can see it's two chunks. Haven't really slice at the video. It's all still all in there, watch. Hello. I kind of just made a little edit. I'm going to go back to my Razor Tool here, and I'm going to slide along until he finishes writing. Right there, I'm going to slice that bit out. Then I grabbed my selection tool. I can click on this, hit "Delete". I can either drag it across or a nice trick in Premiere, is I can click on this. You see it goes white and I just hit "Delete" on my keyboard and it trims it up. Now, I've got this thing, it place through. Starts writing, but actually it just jumps to the bit where he's finished writing. It's kind of a bit weird actually, so I'm going to undo that. It was more of an example. I'm going to undo,undo, until I got this nice along bit here. Remember, trimming it, just pull these ins and the Razor Tool to cut bits out. If you've got a second video, watch this. I'm going to go to File Import. This video, I'm going to import. You can see down here, I've got another video. You can see the difference between these two icons? This one here has both, we'll zoom in a little bit here, is this one has video, but no audio, this one has video and audio. You can see the two little icon there. It doesn't really matter, but what I'm going to do is I'm going to drag this one over. Now, I've got this one and it's going to kind of blend into this one. If you've got more than one video, you want to string them together because there's a lot of different cuts, you just keep importing them and keep dragging them along in this timeline. I can't see the end of it here, so I'm going to zoom out a little bit. Just hit "Minus" on your keyboard. Now you can see this blue line around the outside here? This just means that this is the bit that's active, and if I'll hit "Minus", you can see it zooms out. If I click up here, I can you see the blue line is around this, It's called your program window. This is just what's going to export. If I hit "Minus" here, I can zoom along on the timeline in this one. You just got to make sure when you're down here, plus and minus work. When you're up here, plus and minus zooms in and out of this one. Now that I can see more, I can keep adding videos. Now in terms of the editing, we're just going to cover one or two more things. The next one is transitions. At the moment, this is just a jump cut. It just goes and jumps into the other one. That's fine, just a plain old cut. What we want to do is look at maybe doing a cross dissolve or blend across. What your going to do is you're going to find your Effects window. Go to Window, go to Effects. It opens down the bottom here, and you're looking for Video Transitions. Jump it down, and there's a few of them. To be honest, if you use Page Peel, I'll find you, hunt you down, and take your Premiere away from you. Wow, it's a bit harsh. You can see here, there's a bunch of different transitions. To be honest, they're all a bit enough. Cross dissolve is a good one or a dip to black is a good one. In terms of dissolves, this one here Cross Dissolve is going to work nicely. I'm going to click, hold and drag it and watch this. Can you see between these two lines here, this little gap up here's? I'm going to zoom in a little bit, remember plus, and this is Cross Dissolve, it's this like little tiny baby thing in between. Don't worry if yours ends up on one side or the other or in the middle, it doesn't matter. The effect, the end ends up the same. I'm going to hit "Space bar" here. You can see lovely cross dissolve. Say you want it to be a bit more [inaudible] , you can extend all these transitions, any of them by, you can see, I hold my icon across this and I drag it out. That's going to be like twice as long now, so it's going to be a bit more days of our lives. There's a bunch of other ones in here. Page Peel, I said I would never do it. Here we go. Ready Page Peel. Okay to Page Peel. Other transitions, you can go through them all. What I'm going to do is, I'm actually going to zoom out a little bit, I'm going to delete this one because actually, my little loop is just going to be this chunk here, and I'm going to get into that loop forever. But now instead of a jumping, can you see the beginning starts with this notepad over here? I wished his hand was off because then what would happen is, it would go to the end and would also be off. No, it wouldn't be. Anyway, what I want to do is I want to get it to loop a little nicer rather than just getting into the end and jumping back. I want to add a bit of a fade at the beginning and end, and that will mask the transition a bit. To do it, it's under Dissolve. This one has is Dip to Black, just means fade to black. If I hover about that end, grab it at that end as well, you can see just kind of locks on the ends here. Watch this now, Space-bar, starts black, fades in, and it's going to go through it all. I'll skip along, Space bar, and it's going to fade along again. Because I'm going to force this to loop in my website, it's going to maybe a little less obvious. You might prefer the jump cut. It's fine. Just like the other transitions, if I zoom in, I can extend these dip to blacks, just to make them a little longer. You'll find that really hard to work with unless you zoom in. Okay, a little bit longer. The last bit of editing that we're going to do for this particular one before we go of and start doing more of that style points for Premiere Pro is, I want to flip mine upside down. Why? Because this at the top here is interacting with my menu, so I want that to kind of be at the bottom. I'm going to flip this upside down. What you do is you click on it. So I've got it selected in my timeline and along here, there's something called Effects Controls. If you can't find that, these little tabs are really hard to use. If you can't find it, you lose it, it's gone forever, go to Window, go up here, and go to Effects Controls, and it will kind of like jump it up again. You'll see, if I tool these all up, I have Motion, Opacity, some stuff in here that can be really useful for you. What we're going to do is under Motion, I'm going to tool it down. There's one in here called Rotation, and I'm going to flip mine 180. It just means it's going to be running at the bottom of my thing and it's going to look a little cooler, and at least I think. You can see some of the basics in there like scaling, say you want to clip off bits. I can scale this up by clicking, holding and dragging to the right. I find it's easier to use these, than it is actually on the program window, grabbing the images. Don't know why. It's just the program works, but clumsily that way in trying to work on the video, it's easier to do it over here with the numbers. All right, let's close that down. Let's open that back up and just put the Scale back to a 100. Hit "Save". Now let's get on to adding some cool textures and background, colors and things.
6. 06 Adding texture color opacity to your background video in Premiere : Hi there. In this video, we're going to look at adding a textured backgrounds, some colored boxes, some blurring to our videos, and we're going to create two versions. One with a full screen and the other one more of a letterbox shape where that's going to be put inside of a div. Hold your hats, let's go and make our videos look super awesome. So why do we add all these details? Why do we go off and color it and add washed-out backgrounds, blurred? Why do we go and do that stuff? For a couple of reasons. One is that it just looks cool. The other reason is we're doing it so we can hide some of the poor quality and it keeps the file size down. You lower the amount of colors used, like this one here, it will go and lower the file size. There's a direct connection there, and it's actually quite substantial. Blurring is a nice one when you go through, it's just to hide. See when you want to use a really low res image and you need to blur it up quite a bit like this one, you can blur it. It's really hard to see the pixelization and those types of things. Now, you may or may not know you can do a lot of this with CSS, but you shouldn't do with CSS. Why? There is a blur feature, it's not really well supported, but that's beside the point. What happens is, if I used say the grayscale, but a CSS, and I used the blur feature on this and I do it in code. What will happen is I have to bring in this really big file size in terms of video, and then I'll apply the CSS over the top of it. Whereas if I do it now in Premiere or After Effects, it means that I get to do that beforehand and removing all the colors lowers the file size. Blurring it out, lowers the file size. Maybe blurring not so much. But doing it later on, especially things like muting and those things, it can be done in code, but don't do it because if we do it now in the video, the video will be smaller and load faster and everyone will be happy. Let's look at these in Premiere. On Premiere, what I'm going to do is I'm going to drag my play hits it's in the middle so I can see things going on. I'm going to open up my fixed panel, if you can't see it, it's under Window, jump down to Effects. The ones that I'm going to use are going to be under Video Effects. We'll start with the blur. Under blur here, there's a few different ones. We're going to use Gaussian blur. Why? Because everyone uses that one. You'll see over here, it's been added, Gaussian blur. What I'm going to do just to make it a little less confusing as I'm going to twirl up motion and just see Gaussian blur. All we're going to do is click hold and drag this to the right. What happens in Premiere is a lot of things are scrubbable, so you click hold and drag it to the right. You'll see my video getting some blur. Super blurry, a little bit blurry. You decide, and then you go off and export it. You've got a cool background. Now, blur is used for hiding bad pixels. If you've got a really low res image where you get the compression down really low, blurring is less likely to show those artifacts. The other reason is, say you might have people in it, say it's a cafe saying you don't want to see Bob and Ginny and Norm, Norm is, but if you see these people that are actually recognizable people, if you blur it, they become like in the news when they're talking about generic people. They blur background or film just their feet, just to get rid of that personal feel for it. It just become the people. It's blurring. I'm going to click on the word Gaussian blur and delete it. Another thing to do in terms of hiding pixels is using a bit of film grain. Just that noise that goes over the top of it. You'll find that in here there's an option that says noise and grain. I'm going to scroll down and I'm going to use the one that says noise and I'm going to edit by clicking, holding, and dragging it here to the timeline. You can see there, there is noise. Noise amount, crank it up just like blur. It's up to you how far you go. You use color noise, I turned that off, I like it a little bit more black and white. I'm going to zoom in over here. At the moment its at fit, so you can zoom in. Just get a sense to that, that's far too much. It's going to be depending on your film, but if you add this noise, it gives you that film grain quality and also that hides some of the bad pixelization that can happen if you're using a really low res video, like we got here. It's adding some noise, so I'm going to get rid of noise, goodbye. Next thing we will look at is making it black and white and playing with some of them, maybe the colorization, Instagram filters that you can do to make it look cool. I'm going to go back to fit and I'm going to open up something called Lumetri color. Now, you can find it in here, but there's a nicer way of using this thing called Lumetri color, and it's under window. There is this one called Lumetri color. They are the same except you get this nice big panel over here. Rather than trying to fight with it in this tiny little effects panel, you get this nice big one here. What we're going to do is basic correction is if you need to correct your video, we're not going to go through school calibrating when you're fixing video. We're not going to go through that in this case, but it's pretty easy if you've done any design of photography, this is not going to be too hard to do, but what we want to do is done here in saturation. You can see I can crank it right down, I can get black and white. Or I can keep it so it's a little bit just like has washed out. Now, what I want to do is I want to render two versions or render this version that is fully saturated. That's oversaturated now and then I'll do a black and white one. I'm going to skip to this bit and just show you the end result. We'll do rendering in its own video. I don't want to make this video too long. Magic. I've gone and rendered these two and you can see there's a gray version and a non-gray version. You can see over here, this is a significant file size difference. Now, you might be like, "That's only like two megabytes in a bit." When it comes to background video, low time is our nemesis. If you go grayscale, obviously you don't go grayscale just because of the file size, but know that there is a ramification. If you lower the colors, the file size becomes lower. Great. Back to Premiere, I'm going to put my saturation back up to 100 and I'm going to close down basic correction. This is one called creative, and that could be interesting. Can you see creative? See this little arrow here. I can click this and it will go through and give me a little idea of what this is going to do. What I can do is I can just click on it. You'll see it applied to my video. That gives you that solarized summer look. It looks like Instagram style things, or actually just mentioned camera profiles. There's some cool stuff in here. I'm going to go back and turn my looks off. We're not going to go through everything in here. If you do want to go through a lot more fixing video, I've got a video on both after effects and Premiere for calibrating. But in this case, the last thing I want to show you that's quite cool, everybody loves, is a bit of a vignette. Vignette is the frosty stuff around the outside, of course this. We got to lower it down. If you raise it up, you get a white vignette and nobody wants a white vignette. I'll lower this down and you can see this frosting on the outside. It just makes it look like a special film grade here. You can play around with a bunch of different stuff to make it more or less apparent, but vignettes are pretty cool. Yeah, that's all right. Turn on and off the tick here, you can see what it has done? Cool. That's a vignette. The last interesting thing we can do is we want to watch this because if I have typed over the top of this, you can imagine like, let's have a look at some of these other videos. This one here, Barrel works enough. You can see it's getting lost a little bit in background, but not enough. I'd say that's fine, but you start looking at this one here. This looks fine only because the background image, where the background video in this case has been dulled back, the whites have been removed. Same with this one here is a little different. It's still being dulled down, but not a huge amount, but this type here is a little unreadable, you could argue. This one here has definitely been dulled back. Let's go into this one. Same for this one here, but they've done it, instead of black, they've done this with yellow. Let's go and do that. What I'm going to do is I'm going to close down, I'm going to right-click Lumetri and say close panel. Goodbye. What I would like to do is, I'm going to drag this over. Actually I don't know why that's jammed over there. The easiest way to do that is to create something called a file, new and we're going to use this thing called a color matte. Now, a color matte is just a big colored box. It's going to match the video settings. In our case, it's 1080 by 1920. It'll guess exactly your video size so you shouldn't have to change it. Let's click okay. It doesn't matter if yours are different. We're going to change the file sizes later on. Click okay. Pick a color font. In our case we'll do the black version. Click okay. I'm going to give it a name. Color matte doesn't make a whole lot of sense. We're going to call this one black cover. Cover. Click "Okay", and nothing happens. It ends up in your project. At the moment, we're on effects. You can toggle through these things. It's a little bit hard to get, about this project. If you can't get there easily, skip the window. There is that project that'll turn on and off. These are my videos. You can see in here, there's my black cover, and what you do is drag them out. I'm going to stick them right at the beginning. At the moment, it covers everything, and then I'm going to extend them out. It covers the whole thing and then just lowers opacity, and this is how we wash out the background. Let's select on it in your timeline up here under Opacity, lower down. Then you just got to decide how dark it needs to be. It will depend on your image and what goes over the top, whether you're using drop shadows on the text and HTML. You might have to come back and experiment a little bit with this, but that's how you get it to be color cast like this. Now if you want it to be yellow like this one here, we do the same thing. But instead of being a black, you see the eyeball here? That turns it off of the black layer. I could delete it, but I'm actually going to use that in a sec so I'm going to leave it there. So what we want to do is make another one, File, New, and we're going to go to Comment, same size. Now you can obviously guess them. I've got a specific color that I'm using for my website. Let me show you a little trick. What I've got is I've got my photoshop Mockup that I've used to create the design for this and watch this. I can move Premiere the other way and watch this. See this eyedropper? This is one of the swatches that I've been using, or I could move it across. Actually, I can use the eyedropper here and go through and say pick the red and pick all these colors. That's the swatch I want to use. Click "Okay", sneaky trick. I'm going to call this one the green cover, and I can bring it back up. You might have the logo in the background or something like that, or you might know the hexadecimal number, you just type it in. Remember, it's over here, green cover. I'm going to stick them over the top, and I'm going to stretch them out. It's going to cover it completely up, then I'm going to lower the opacity. Now what you'll notice is that it's fine and it looks kind of how I want it, and it's probably what I've done here, just dump it over the top. But to make it a bit more richer and more of a tonal thing, I want to do two things. I want to use the black and the green, and I find it looks nicer. You might disagree, but I'm going to turn this one on. Can you see on and off? It's still that green but it's flattened out a little bit more, so you might just use one of them. I like to use two of them. How dark should it be? Again, it depends on what you want to do. Great. Start at the beginning, plays through, and then eventually gets to the end. You can see instead of dipping to black, it's dipping to that green. If I wanted it to dip black, I can grab these guys, copy and paste them, and stick them on this top lay here, and then we'll dip to actual black, but I'm happy that it dips to that green. I think the black might be a big obvious change. Great. So that's going to be it in terms of colorizing and texturizing it. What I'm going to do in this tutorial is I'm going to be doing a full background like this, but I'm also going to do more of a letterbox style where it's just a slice, that's just going to be for a hero box or just one of the div. I'll show you quickly. This is it here. You can see I'm using this hero box from a previous tutorial, and I've put it in here. I need to do some things slightly differently. One of them is I'm going to use that black instead of the green. It's going to dip to the ends, and it's also going to be a bit blurry in the background so I could put type over the top. If you just want to do the full background, you can skip on for the rest of this tutorial. For the rest of us, let's jump back into Premiere. To do it, what we're going to do is you can see that this is my covers, this is the video that we're in. This is the example video that I've brought in for you, I'm going to delete that one. What I'm going to do to make it a little clearer is I'm going to rename this one. They've got the same name, so I'm going to double-click it, and I'm going to call this one my full sequence. Actually, when you're naming these, we're going to name them properly here because when it exports, its going to use this name of the sequence to give it the file name. Because we're using website stuff, we're going to have to use special stuff. So we're going to call this one designer-full-background. Lovely. What we're going to do is that's still a video that goes inside of it. So I'm going to duplicate it, you can right-click it, and go down to Duplicate. I've got two of them now. The second one here, I'm going to rename. This one's going to be called still designer-, and this one is going to be letterbox. Let's call it hero-box. Letterbox just because it's going to be a long, thin thing. [inaudible] let it through, you probably got that. In terms of the hero box, at the moment, they're exactly the same. Watch this, this my designer full. Just before we go on the naming, I've put hyphens in here. If you put spaces in, you're going to cause problems when you try to link to it on your site. So stay away from spaces. Use underscores or hyphens. I've got this full background. You can see this is my sequence here called full background. If I double-click this one, you could see I've got a hero box one. There's that guy, there's that guy, and there's that guy, and there's that guy. They're exactly the same at the moment, but I can make changes to one. I'm going to work on this hero box now, and in particular, I'm going to shrink down the size. First of all, I'm going to delete this green cover. Now it'll be easier to know that's that one, and that's that one. So what happens in Premiere is if you're working on lots of files, say you need three or four different versions, is you can keep duplicating the sequence and at the end, you can say export all my sequences for me and it'll render them all at the same time. But they're like separate little jobs now. I want it to be black, I want it to be blurry, so I'm going to select on my video. I'm going to find Lumetri Color. That's enough of Lumetri Color. I didn't actually use them. I'm going go to my Effects. Where's the Effects? We got the window effects. I'm going to find blur, remember we use Gaussian Blur. Crank it up, how much? Not sure. There is black cover here, I'm going to make it a bit darker. Cool. Now I want to slice this up, and you do it over here, back at your project panel. There it is there on window project, and I can right-click this guy, hero box. Go into here and on the bottom here, Sequence Settings. Now, ignore this one down here. He looks like the obvious one. Don't touch him. It's this one over here, the frame size. Don't worry about your final output now we'll do that later on, it's just about the ratio now. You're just looking at the height versus width. We can scale up and down and play with file sizes at the export process. So keep it as high rate as you can at the moment and we'll make it physically smaller later on, except for the cropping. So horizontal is 1080 across the top here. If we're dealing with video, you can't call it 1,080 for some reason, it has to be 1080 just because it's cool. How high is it going to be, 500? We're going to experiment. I got a sense of how it's going to look, remember, in this thing here. But what you want to do is don't make it perfect, don't take a screenshot and try and work out the ratio because, watch this, it's going to be responsive. It's going to change depending on lots of things, so you're just going to get that roughly close to what you want. I'm going to click "Okay" on 500. It's going to delete all my preview files, that's okay. You can see over here now is that a bit of a freak out, but it's a lot more my kind of style. You can see I've cut out all the good footage. So what I'd like to do is I'd like to down here and select it, and dragging it in the window, surprisingly hard. It's easier to do it over here in motion position at this one here. You can see I can keep dragging it up until I can see the bottom of that. Now one of the things with the Gaussian Blur, which I didn't mention earlier, you can see it's doing it to the edges and they're getting all frosty, just puts like a goop around the edges and frost and blurs it in. There's this is one here under Gaussian Blur, it says repeat edge pixels, and it will get straight on the edge there and that's more what I want. So I'm going to lower them down. There you have it, he's banged up. Now when I play, you can see I can scrub through. Wait a moment. Can you see this? You'll notice that mine goes up and down and you might have been checking this before and seeing it, I didn't notice it until now, is that under my opacity, if I twirl this down, there's actually this little stopwatch, has been started. So now when I'm moving my playhead along, it means that I can raise it up. You can see we started there, come along and then maybe make it fully black there. These little keyframes, it's not what I want to do. It just means of a time though now, is that you've just had the crappiest introduction to keyframing. We're not going to do that in this course because there's lots to do. I'm going to delete those guys and just turn that off by default. Now what it means is when I select on black cover, I can just select it and say you are that color there. Keyframes are confusing and not what we need at the moment. Great. It plays along, blurry, black, and it's the right shape. Why do we crop the top and the bottom off? A couple of reasons is that it's going to make it easier to position in that div tag. The other reason is that often this top and this bottom there are never going to be seen in the video. It's just wasting lots of good file size, so you want to trim those off. We got two versions, we've got the designer full background, and we've got this one here. Let's move on to the next video and probably the most important part of this video editing, is getting the file size as good quality as we can for some super small file sizes.
7. 07 How to make your html background video super small file size : Hi there. In this video, it's all about picking the right format for our video and getting the file size super-duper small. What we'll do in this video is we're going to make a group of videos like this, lots of different versions so we can see the differences in file size, and we're going to look at this one. This one, 10 megabytes, and then it drops off a cliff down to 1.7 and still looks good, I promise. Let's go and do that now. How big is big? One megabyte is really small and good, and 10 megabytes is getting pretty big. Anything over that, you'd have to have a pretty good explanation to convince me that you needed a background video that was that long. Unless it's your actual product and it's actually doing stuff mostly these background video are supportive graphics and a really big file size is going to make that website load really slowly and that in terms of user experience is bad. Try to get it as small as you can. I try and keep it around the two megabytes level. I've seen stuff like if you jump to the PayPal website, like here, you can see their background one is, they're using quite a big file size and it's really long and if you pick through their website, you can see it's about 10 megabytes. They've decided that this particular page is worth 10 megabytes for them. Back here in Premiere, we're going to start exporting this thing now, and we need to export a couple of different file formats. The main ones are or the big one is an MP4, it's the most usable, easily shared one. The other ones that you're going to have to do is one called a WebM. It's W-E-B and an M, so WebM. Google made that one, and at the moment it's the most common fallback video format. There's some other ones like the Ogg, O-G-G or OGV. Now that was meant to be the standard but at the moment, nobody's using it. Everyone's using WebM instead. My advice to you at the moment in 2017 is that MP4s followed by a WebM, the two formats we're going to need. What we're going to do is we're going to export this full background version and we'll do this one as well, but we'll focus this video on doing the background version. The same rules apply to both of them. When we export a video, we need to go to its ControlM or CommandM on a Mac. It's File, where is it? Export and its Media. This will export it from this document. Now, if it's grayed out and you can't see, it's washed-out like these ones it means that you'd have one selected because we can't have different sequences. If you have something selected up here, it doesn't know which one you mean. You go to File, Export and you go, because it doesn't know which one you mean, so you're going to click on here and you can tell you clicked on it, see the blue line around the outside that indicates, I mean this guy or you can select them in the project window too. In the CommandM, this will open up. Now you can use this window here, it's fine. What we're going to do is we're going to hit ''Q'', and we can get to the exact same screen in Adobe Media Encoder. If I click "Export," that little button there, it's going to go off and export it and I'll have an MP4 when I'm finished but what I like to do is pass it onto queuing it and that just queues it in something called Adobe Media Encoder. It's going to have the same thing, which is if I click on the WebM source I'm back to the exact same screen. It doesn't really matter if you adjust it straight out of Premiere or you do it here in Media Encoder, but you'll see some pics for this one, it's going to cancel. What happens is Adobe Media Encoder looks like this and adds it to this queue here and what happens is, is I can queue up lots of different versions. My litter box version, and I have 10 different sizes that I want to make, is they can queue them up here and you can keep working in Premiere. That's the nice thing about Media Encoder is that if you hit ''Export straight from Premiere'', Premiere can't be used until it's finished. This one here, this works in the background nice. What we're going to do is start looking at file sizes versus comparisons. What we're going to do is look at formats first. You want an MP4, and naturally you want to go to this one MPEG4. If you click on it, what you'll find is, consists a 3gp. I guess like an old phone and file formats. That's not the one we want. You want this one called H.264. This can you see here? It gives you an MP4 and this is the codec we have to use when we're putting stuff online. Now, the big things we need to change is this match source is going to be exactly how you downloaded it, and it's going to give us a really big file size, but we're going to use it in terms of comparison. If you've downloaded something from Adobe stock and its 4K, which is just four times the standard HD, equal 4K is, it's got to be huge. We need to make a few changes. Now if you're watching this video because you've got a job to do and its due in about 10 minutes, skip this video, click on "Match Source," go to where it says presets, and go to this one that says import preset, and then go and find the ones that I've made for you. In you exercise files and there's one in here called encoding presets. The first one you got to bring in is in this case, it's going to be MP4, click it, click "Open," I've already got one so I'm going to click "Cancel" and it'll appear, can you see this is preset? It'll appear in this little list here, click that, click, "Okay," click "Play," and you'll get something pretty small and it will work for your job. That's my cheating preset, but for the rest of us, we need to learn a little bit about it just so that we can get our file sizes tweak per our video. We're going to leave this one as main. High bitrate. What we're going to do is select it and you see this is an option that says duplicate, this is a good way. This is going to export the same video but in different settings. What I'm going to do is click where it says "Match Source" and get this big window here, and what I'm going to show you now is how to get the file size super small. First one and easiest one is audio. If I turn off the audio, it will lower the file size and it will stop us having to do it later on when it comes to our coding, we'll have to hit the mute button, there's a mute option in the code to make it mute, but we won't have to because there'd be no export audio. To be honest, you don't really want audio playing in the background. I hate it when a website starts up with audio automatically playing in the background. I'm looking for the pause button. If there's not a pause button, it's goodbye website. What we're going to do is just do some examples. We're going to call this one, it's the same name. Where am I going to put it? I'm going to put it on my desktop, under my example videos, and this one's going to be designer-full-background and this one's going to be called, no audio. Just as a comparison, and I'm going to click "Okay" then I'm going to select them, duplicate them, and we're going to do some other bits. Click on "Custom." We've got no audio. Let's look at the big one. The biggest one to reduce file size is down here under the video tab, scroll down, scroll down. This little guy here, bitrate settings is going to devastate the file sizes. At the moment, it's all what's called high-quality. It's set to 10 and 12. The lower you go, the lower the quality, but the lower the file size, and what you'll find is, is that it's really hard to tell the difference between say 10 and down at something like one. It's not HD full K, amazing quality anymore but a bit show. On your laptop screen you won't notice the difference. The file size is at 15 megabytes. This is an estimate. Sometimes it can be wildly off, so don't use this as your absolute gauge, but let's look at this. The first thing we need to do is set to a variable bitrate of 1 pass. Just means, constant bitrate means it's going to all be set to 10. Doesn't check, doesn't go up and down. You click on Custom Bitrate and you just set it to one and it doesn't care, it's going to be one the whole way through, but if you go to variable bitrate, it's going to go through and say, it's defaulting to this before remember it was at 10 and 12. It means it'll go up and down depending on what's on the screen. Really detailed bits of video. I'm going to use the higher bitrate, high-quality, and the stuff that's not moving just gets the lower bitrate because it doesn't need it and that can drastically reduce your file size. In terms of this encoding, 1 pass just means it goes through once and checks it all and goes, "Yes, you're high, you're low." This thing here it says 2 pass, does it once, it comes back, and does it again, and what you end up with is smaller file sizes and better quality. I don't know why you default to 1 pass. It takes longer, that's the big thing. If you just burning this thing out real quick, you can put it on 1 pass, but there's no point really. Now target bitrate, what should it be? It's as low as you can go and you can do some tests with your video. If you've got super awesome video from a stock library site, it's probably going to get really low and look really good still. If you've shot it yourself on your crappy phone, the lower you make it, it's going to look pretty bad. In our case, I pretty much always type in one and 1.5. It'll target one but if it needs to, it'll go up to 1.5. The dizzying heights. It just gives it a little bit of wiggle room. You can see down the bottom here one megabyte, that is magic numbers, and it's all to do with this bitrate. Let's click, actually give it a name. There is no audio and this is going to be no audio and what is this one? Low bitrate. Great. Let's click "Okay". Most of that work is done in the bitrate. What I'm going to do is show you some other little things just to get it down even further. You might be dealing with that really big long two-minute video and you're going to have to try and get as much as you can out of this, so I'm going to duplicate it again. You click on "Custom". In this case, audio is off, my bitrate is already low, I'm going to do a couple of things. One is the frame rate. What is frame rate? Your video is actually just a pile of static images and if they flash in front of you fast enough, the human eye and human brain believes that they're a live-action, but they're not. They're not real-world stuff, it's just a bunch of images like a flip book. Twenty-five frames to the second, we're all hook line and [inaudible] convinced it's moving images, but it's just lots of flashes of separate frames. The lower you go, the more jumpier it gets. The higher you go, the smoother it gets. Say, my GoPro shoots, I think, at 50 or 60 frames per second, and you can get 1,000 frames per second bullet-time matrix looking things out of the scope of this one, obviously, but 25 frames per second is what this was set at. You can go lower. Now, if you go down to 10, it's reasonably noticeable. I find a nice compromise at 15. In my case, our video is pretty basic. As big and green, watch this. I should have had this a long while ago. You can see I've slided this along because it actually gives me a little preview of where I am in my video. What happens is when I change things in, say, my bitrate settings, this will update. It's a reasonably good explanation of it. I'm going to set this to Fit so I can see it all. Fifteen frames per second, I doubt you'll notice it that much, especially if it is background and it's blurred, it's fine. You can go down to 10, give that a check. I'm going to click on this one. This one is going to be no audio, low bitrate, it's going to be a really long filename. This one is going to be frame rate 15. Great. Let's click "Okay". What else can we do? Let's click on this one, so duplicated them, click on this guy. The next one we're going to do is we're going to play around with our height and width. We're going to maybe change the height of this one. We'll do 500 pixels high. What I mean by that is under the Video tab, the top here, it's actually exporting it HD quality, and that's not what we need in this case. You could, there's nothing really wrong with that, the only trouble with that is that the way that we're going to do this in code, there's something we're going to use called the minimum height and the minimum width, and it just means it's not going to be that responsive, it's going to look a little strange. It needs to be a little bit smaller. My advice here would be is not go full HD. Why? Because you're going to have people looking on this on different devices and they're not going to be able to see this HD so it's wasted file sizes, page is going to take a long time to load. The highest you probably want to go to is 720, which is the original high-definition, more like standard definition. Seven twenty high and that's the width. What we're going to do is we're going to go down even lower, and you can see it's going to fit. Let's go to 100 percent, gives you an idea of the size. You can still see, at 720 high, it's still a pretty big video. So I'm going to get this here and I'm going to change this to 500. Now, it's at a small size, but it's going to be able to stretch and expand to fit the background, and I find that for full background works for me. The file sizes, it's pretty vague down here, it's still one megabyte. How much did we lose? We'll see when we go and export this one. Changing the size here is not just making the file size smaller, it's just the technique that we have to use at the moment in code. Minimum heights and widths up 100 percent. We'll look at it later on, but you need to make it small enough to be able to be used. Now, there are a few other things you can start doing in here. You can start playing around with key framing and there's a few other things, and they're getting pretty nerdy, and you can play them around profiles and levels and field order. Now, that's going to be in terms of how to get the file size smaller. There's a couple other things down there like frame rates, progressive loading. That's getting into that super nerdy minutia, and we're not going to go through it in this course because you're not going to see much difference. There would be video people out there taunting at me saying how dare I, but for me, I found those are the big ones, those are the good ones. Let's click "Okay". Now, we've got all these different videos. What you'll probably going to do is just jump to this last one. This is what my preset set it to. So if you want to use my preset, it's going to jump into this 500, 15 frames, low bitrate. Job done. I've queued all these ones up just to show us file size comparison and quality comparison. This is why I love me being harder kickback. Hit the "Play" button and it just choose through them all. Actually, it's trying to render them all at the same time. If I was doing this in premium and I hit the "Export" button, I have to do them all one at a time which is not a big deal, they're not super long, but you can see this benefit. If you're working on a really long video, I love [inaudible] you can go off, grab a coffee, come back. If it's super long and you got a really crappy computer, you might have to go back, you might have to go to bed and wake up in the morning and the rater still could be working. That happened to me loads. By the power of Internet, let's make this zoom up. Ready? One, two, three, go, zoom. That probably took about two minutes my side. Now, let's go and look at what files got created. Let's forget about these two at the bottom here, I'm going to actually open them. These are the things that got made. Let's order them up in file size. Actually, I'm going to bring those guys back because that was the original. This is me making it gray. This is a good little test. Yeah, that's the original video. Eighteen megabytes, making it gray, we're removing some of the color, 16. Then we did it without audio. Now, the audio doesn't make that big jump. One of the other things that we did is we made it quite dark green. That was one of the thing we did so we lost a bit of file size there. This is a few extra things. But then we went low bitrate and that's the big change. Can you see here? You can mess around with frame rates and stuff, but really, it's all about this bitrate going from 10 and 12 down to 1 and 1.5. You can see a super manageable file size now. Now, in terms of the quality, let's have a little look. Actually, what we'll do is we'll open both of them up, I'll stick them side-by-side. It's not a super scientific example, but you'll get a sense of these two. Over here, let's put this one at the top here. This is the high-quality one with no audio. Let's have a little look. I know we zoomed out a bit and it's not a fair example, but you'll have to trust me, they look fine, especially for a background image and especially because we are not looking for super high def, we're looking for page load time. Hey, it has to look good, not terrible but it's all about file size and you can see bitrate is good. Frame rate, got it down a little bit further. So the frame rate down to 15 seconds. Let's have a look between these two. Just have a look. You can tell it's a little bit jumpier, but my case, because my video, there's not a lot happening, the girl is just writing a little bit on the notepad. So it's 15, it's fine for me. Also, sometimes, that look can be quite cool. You might get down to 10 frames, and it's got that jumpy film grain blurry thing going, so you get file size savings and it looks cool. You can see down here, the actual pixels making the pixels a lot smaller, hasn't done much for the file size either. So why do we go that small? It's so that we can make it responsive later on. Later on, in a couple of years, there's a new bit of tag that comes out and I'll talk about that later on, that will make it fully responsive but at the moment, we're stuck with min-height, min-width, so we need to make it a little bit smaller that we might really want it. Cool. We're nearly done. We've done our MP4s, what we'll do is we'll cut this video off here and will jump into the next one using the webM format. Not that long, but I'm going to cut that off here so this video is not epically long. All right, see you in the next one.
8. 08 How to make a WebM video file in Adobe Media Encoder & Premiere Pro & After Effects : Hey guys. In this video, what we're going to do is we're going to look to show you how to install this WebM format. You'll probably notice that it's not actually installed by default, so we're going to install a plugin and we're going to make it, go through the settings to make it really small and exploit it, and we'll end up with this lovely guy;.webm and look how small he is. Let's go and do that. Why do we need a WebM format? MP4s cover pretty much all the browsers except a couple of use cases, and those use cases can be filled by the WebM format. Now if you'd asked me a couple of years ago, what video format we should be using? It would have been OGG; the OGG format. Now that has changed. Now the WebM is the format to use, so if you're watching this video, it's 2017 now. If it's 2024, obviously there's going to be a different video format, but so just go and check what's common, but right now the WebM format is the good for back one. Google makes it or at least sponsors the development of it. It's an open source format, so we need to go and make it, but Adobe have made it a little hard to do. I've made it a little easier hopefully for you, so let's go and do that. Why is it hard? It's because the actual format is not built into Adobe Media Encoder or Dreamweaver or After Effects, we didn't install it. The cool thing about it is there's a free plugin. There'll be a link up on the screen here. Here it is. Going to the links is even easier. It's this place here in fnord and then I get a WebM. You download the Mac or Windows version. Now I've included the plugin. You can see it here, it's in your exercise files, it's the WebM plugin. It might be getting a bit old. You might want to go to the Website and download it case there's a newer version, but I've included there just to make it helpful for you. What you need to do is you download it or click in here, and you just run it. You can see here is my DMG version, and you run that, that's my Mac. This MSI version is for your PC. Double-click them and they will install. What will magically happen is you'll have to restart Premiere, or After Effects or Media Encoder or whatever you using, restart it. What will happen is, now if I go to File, Export, and I go to Media, under Format, there's now one called WebM that wasn't there before. Click on "WebM". The cool thing about it is that it's just a different file format. It uses a lot of the same things. It has height and width, and it has slightly different variable, but right down the bottom here, but essentially the same things. Now if you want to chip, I've got a preset, you can install. Remember from here, you go to this one say Import Preset and there's one called Dans Web Video WebM Preset, so bring that one in. Instead of going through everything and explaining it all again, it's exactly the same in the previous video. If you haven't done the previous video, it's the MP4 version of this. It's exactly the same. We're not going to go through it all again because that was epically longer video. What we're going to do is, yours will probably start to default. It'll have audio ones, you turn that off, you change the height and width. Change the frame rate to 15, and set the encoding. This is the one thing that's a bit different is the codec. This is the new one, that's the old one. I think the new one is pretty good on most browsers. I'm going to use the older one because it works on more browses and the file size looks very similar, and the quality looks just as good. Now in terms of the bitrate, put this at a thousand. That's what I've found to be good. You can go lower, you can go higher, but it increases or decreases the file sizes accordingly. Down here, 2-Pass Encoding very similar to the MP4, and that's it. We're going to add queuing up, we're going to change the file name here. I'm going to put this one in. It's going to go into my videos. It's giving me the exact same thing except it's got the WebM extension. Click "Save", hit "Play". You can see these ones are finished, then I'll run again. This one here now plays, it goes through and encodes it. Now WebM takes forever to encode. It took the same time to encode like five versions of the MP4 as one WebM, so we're going to speed this up again. Ready, set, go. It's done. Let's go and check the file. You can see it here. It's even smaller than our MP4 version. Often you can play around with the settings in MP4 and WebM. It's not like it's smaller file format, it's just the settings that I picked ended up becoming a small video. What I've found is that I can mess around with the MP4 and get it just as small as a WebM, and just as good a quality. This people that would argue that point though, but know that it's not just like half the size using WebM, it's because my settings were different than were like paralleled. Now installing the plugin is a pain in the bum, because it feels like Adobe Media Encoder or Premiere or After Effects, they all should have that feature. What you can do is you can jump out to this one here and help me out. Go to this one's called Adobe.com products/wishform, go to here and what you can do is pick your product, pick Premiere and you write a little list and say, please put in WebM. What happens is the developers get these lists and whoever yells the most, the top of the list gets these features and that's a feature that I want, so let's go to team. Last thing we're going do is I'm going to give you, because this is a slightly shorter video than the other ones in this series, I'm going to fill it up with some awesomeness. In Adobe Media Encoder, just a little thing that I find quite useful is say that I want this WebM and I'm going to upload it to my website. What happens is I'm going to duplicate it. When I go into Custom, we did this before, we played around in here, but see this option over here which says Publish. This can be really handy. You can publish it to your Creative Cloud account if you're using that. You can just dump it onto your shared drive with people and it's instantly up there as soon as it outputs. That's really handy when say you're go into bed, and you render all of these and then they chug through and they spent hours rendering, but when they're finished, they're going to start uploading to the Creative Cloud. You can see it can upload to your Behance account, it can go to Facebook. There's so many and this is the one I use. FTP goes to my web server where I host my website, and I just dumped them into a video folder there. Put them in the remote path, the video. Happy days, Vimeo, YouTube, that I want to use quite a bit as well. If I'm uploading straight to YouTube, bring that straight to YouTube, happy days. All right, that's it. Now we're going to go and start building an actual website, and actually add this video stuff to it. Let's go and do that.
9. 09 Getting our website setup Dreamweaver : Hi everyone. In this video, we're going to go through and set up our Dreamweaver settings so that we can start building our site. So first thing we need to do is let us make our work spaces the same, so you can follow along. You can work in standard, that's fine. I'm going to work in this new one called developer. Just going to click on that. It's just a cleaner version. We're going to work more in code in this video, in previous tutorials I work a lot more in standard and that's fine, but this one, let's switch to developer and work in this one. Now, before we get started on any project, we needed to find our site. So go to site, go to a new site. All this does is tell Dreamweaver where you're going to keep the files for this project. Okay, so my site name, okay, I'm going to give it a name. This one's going to be called Bring Your Laptop Design Agency. Where am I going to keep it? This is where the local site is. Let's click browse. I'm going to put mine on my desktop. I'm going to make a new folder and I'm going to call this one BYOL. This one's going to be website. Click Create. Let's click Choose. One thing you can do when you are defining a site, it's really handy, you go to advanced settings and then where it says default images folder, click on browse. You can see it's defaulted to inside that folder we just made, and inside here we're going to put images. It just means if I click choose, it means whenever I grab an image, say from the exercise files in this class, it's going to grab it out of the air and put it into the right folder and not have to ask me every time. It just knows by doing this. Now we're not going to go through sitting up servers now and connecting to the net. we'll do that on the final video when we go to publish. But for now this is all we need to do to get set up. Let's click Save. On my desktop here, if I have a quick look, there's my desktop, there's the folder that I made. Inside of it is nothing except an empty folder for images. Great.
10. 10 Adding a fullscreen background video to a website using Dreamweaver : 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 a page. Let's go up to File, let's go to New, and click "HTML. " We're not going to be using Bootstrap in this case, we're going to set it to None. Let's give our document a title. This is going to be the Bring Your Own Laptop Design Agency. HTML5. Let's click "Create". Next thing to do is save the file, so let's go to file and save. It's defaulted to the right folder. This my BYOL website folder and this is going to be homepage, so it has to be called index, lowercase i, no spaces. Remember, our homepage has to be called index and that's the page that gets loaded first on any website or subsequent pages can be called anything you like, as long as there's no spaces, you have to use hyphens or underscores. Click "Save". You'll see over here, this is my folder structure. If you don't have it, you might have to toil this down. There's my images and there is my HTML document. A quick look on the desktop, there it is there, my images folder with nothing in it, and there is my index page. Great. Currently our index page doesn't have a whole lot. Let's go and add our video to it. To add a video tag, we need to do it to the body not the head. Everything that the users don't see, but it's what Google uses and the browser uses. Like this title along the top here, we don't see, 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 keyboard and characters that you're using, we're using Latin letters. Body is everything that the user sees, in the moment there is nothing there. 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 balances it out and makes it a little easy to work with. We're going to put in a video tag. My video tag is open angle brackets, type in video. You can see it has a lot of painting. You can see Dreamweaver goes, I've typed in vid, and it's go, do you mean this? Often you can just hit Return on your keyboard and it will fill it in. Here we're going to close it off with angle brackets. Then every tag needs an opening and a closing. The body has an open and then it has a forward slash close. The head has an open and a close. The HTML has an open and then down there is a close. So video is the same. To close it off, we need an angle brackets and then this forward slash. You can see it on these guys here. Want to talk forward slash, Dreamweaver is clever it says, you probably mean to close the tag off and it just finishes in there for you. That's how you add a video tag. Now, you need to tell the video tag what video to play. You do it by adding a source. Just after the word video here, we put in src. You can see defaulted to it. If you hit Return, it fills in the rest of the equals and the quote signs. Awesome. You also see you get this browse. I'm going to click on Browse. In the moment, I've only got my images folder and I've got this index. Ignore this.DS, it's a mark thing. 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 is one on here called video, and this is the one that I'm using for the full background. There's this one, full background, and then there's the little data box version. I'm going to use this one, that's the original. Let's click "Okay". It's going to say, this file is not in my current local site. It just 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. I'm going to go through, would you like me to copy it there now? You say, yes, please. Awesome. You could just dump it in here with your index file, but it'd be really common to go to New Folder, put in videos, click "Create", and I'm going to put it in there. Now, your file format is being done in the previous videos. One thing we didn't cover hugely is just making sure that you couldn't have this. You couldn't have designers full space 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 just some basic syntax there. Great. We've edited a video and let's go and check it. What we're going to do is preview in the browser. We're going to use real-time browser preview in the bottom here. This is how you get to it, and you can preview in all the different browsers, Google Chrome is by far the most common. If you don't have it installed on your machine, go 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 testing Chrome that'll be your basis because so many people have Chrome compared to all the rest of them. Save this please. What happens is, on my one it opened up on my other screen. I work on two screens here at the office. Before we look at the video, and what end up happening is, see this video here. We're going to toggle in this class between this, back between the video, back between this, and 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 app on another screen, and I'm testing at the end. It updates live, so it means I don't have to switch between the two edges. I just update the code and it updates on this other screen there. But it gives you good excuse to go out and buy a new monitor. You look awesome with two screens up. This is our video, it's there, I can see it. Nothing is happening though. There's a bit of syntax we need to add to this video to get it to do things. There's a bunch of different things you can do, we're not going to cover every single one of them. Go on and have a look and see what other things you can do with video. But the basic the one we want is, can you see if I put a space in just after video? Dreamweaver is really handy, it gives you all the things that potentially can be applied to video. Some of them make sense. There's things like autoplay, it's the one 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 put these controls, and these are just standard HTML5 controls. Go away. Controls is not what I want because I don't want that for the background video. I want autoplay. Go back to, put an O, put in a space, and it gives me these, autoplay. Lovely. Now if I save, preview my browser, look at it. It autoplays. Cool. HTML5 video is pretty easy. There's no plug-ins, it just works with nearly all modern browsers. You can see in this case it gets to here and then stops and waits forever. That might be the what you want, then 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 video. This is just the end frame. Might be a call-to-action or you're just happy for that to do it. I won't mind to loop. You're probably going to guess it. You say 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. That thing will keep on looping. Anything other useful ones in there? There's mute. If you've got sound on yours muted, my advice is to go and re-render the video, encode it again with the audio off, it will save you a bit of file size. If you're 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've got no audio in our track or in our video, so we don't need it. Have a look through the other thing. Those are the main ones we want. There's a 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. That gets done not here in the HTML, but in a CSS. I'm going to hit "Save". We're going to create other CSS document. Now, we're not going to cover a huge amount of CSS in this course. If you're brand new and you're like, "Man, I don't even know what a CSS is," go up to one of my other courses, there's a lot of detail into CSS. But we're going to be quick in this one. First of all is create a CSS document. Let's go to New, and HTML, CSS. HTMLs they get the things, the core concepts on the page, they type the images, the videos. The CSS is what you do to style them, tell them what to do. We're going to tell the CSS to stretch it. Well, we're going to use CSS to tell a video what to do. We're going to tell it to be full screen. Click on "CSS," click "Create". With a zipper file here, I'm going to save it. It's going to go into my same file. Some people put into a folder called CSS, I don't. Stick it here. Call it anything you like, but pretty much everybody calls it styles.css. 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 when we close it down, remember they are two separate files. You can see them there, 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 head is where the instructions for the page go and the body is the things that actually appear on the page. Down here in title, we say, we're going to add the link to the CSS. This is a long one. What we're going to do is to use a little trick. Instead of putting in all the syntax to link a CSS document, we're going to use a little shortcut in Dreamweaver, and if you press Return, it does nothing, but if you hit Tab instead, watch this, awesome. Instead of having to type angle brackets link rel equals style sheet, href equals, all of that can just be done with tab, same with this video tag. We did this earlier on, where we typed in the beginning and the end. I'll put another one just underneath, just to give you a bit of an example, I'd never type in video source equals, I type in video, hit Tab and you see it puts it all in there for you. I'm going to undo that. Learn some shortcuts, awesome. Where's it going to link to? It's in this h-reference, this is the hyperlink reference, and where is it going to go to? We're going to start typing. If I delete that and I put it back in, for some reasons, sometimes when you're using that little trick, it doesn't load this little pre-loaders. Sometimes what I do is I just delete the first quote, put it back in, and then that comes back to life. I'm sure it's a bug, I'm sure it'll disappear. What I'm going to do is, I'm going to type styles.css. That's the file that was linking to. You can see at the top here, this changed. This is the related documents bar. Instead having two tabs open, you got like two different tabs here and is linked to it. Now HTML and CSS are married, they are connected. Cool, that's what we needed to do, to connect them up at least, now we need to go and add some CSS to style this video. Let's go and style it in our CSS, click on styles.css on top. Now we're going to put in our first bit of CSS. 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's about exactly the same video and over here I could start styling it and I put 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 sites, there's millions of videos, so styling this tag is going to affect all of them. All videos on every page is got to be this fullscreen 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 edit to the things that I want it to apply to. A class is something 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. I'm going to copy the words because my spelling is terrible, and then I need to go and imply it. I'll put in that and put in my curly braces. Just to get started, all the properties for CSS need to go inside these curly braces. To connect these two up, I need to go to source because at the moment it's just call video and it has no connection to that fullscreen thing I just made. What you do, just after the word video, put in the space, you start typing cl for class, hit Return, puts a little syntax in for you. Remember that equals and quotes mark have to be in there and you can see even helpful of Dreamweaver says, "Did you mean fullscreen?" I said "Yes, please." You'll notice, you don't put in the period here. Even though I copied mine to go in and paste it in, I didn't need to because Dreamweaver was super helpful today. That connects the two up, so they're doing stuff together. Now I need to tell her what to do, and to make this thing work, we need to do a couple of things. The main ones is minimum height and minimum width. I've typed in min and then hyphen, you can see it gives me all the things within my internet. I'll do a minimum height and the colon goes in there automatically and we put in 100%, not surprising. We always end our CSS properties with a semicolon. We'll do the min width as well. I'm just typing and use my arrow keys to go down, hit Return, 100%, semicolon. Let's go and look where that gets us, it's not finished yet but let's have a look. Cool. It's a stretchy video. 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 things we need to live with at the moment with the stretchy background thing. 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 thing is called cover and it does a really cool, easy thing where it stretches out to the background, you don't have to do this minimum width thing. Problem is, it's not used by loads of browsers at the moment, so it's not that practical. It will be in a few years so go and check that, you might find something like object fit versus minimum width and just check if it works. Nice and stretchy, awesome. But there's a few things like these scrolling bars here and there's some white gaps on the edges. Let's go fix that in Dreamweaver. One thing I didn't explain, just thinking, is that in the minimum width is, if I made this like a full care 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 at there at fullscreen and it's fine, if you want that, you might end with only just the top-left corner, because it's image is so big, it's off the screen and it won't get any smaller than its minimum. In our case, I've made mine 500 pixel, so it's a bit of give, and it keeps a file size smaller. Hopefully that explains it better. 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. There are cases where it's not going to make any difference. In our case, the video is going look exactly the same, but there are cases where this is needed, so just add it, it doesn't cause any harm and will help you in certain circumstances. Other things we can do is we want to get rid of these scroll bars, see these scroll bars aside here? We're done. 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. We'll look at fixed first and what I'll do is I'll show you a couple of examples I've got. I've just made. This is the finished site. Obviously we're not here yet, but this one here is set to fixed. We talked about fixed and the other one is going to be absolute. Fixed allows us to do this. I've added some lots of copy here, just a blank copy. You can see the video is fixed to the background, it doesn't go anywhere. Where is absolute? Is 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. At this case with us, if I go to fixed and I preview in the browser, and I'll close down these two that I made as examples, it doesn't really matter because I don't have any content on my page, so I figured out to show you that way. We're going to leave ours as is 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. It gives a point of reference for later on when we need to put type and images over the top of it. If you don't have it, it won't work, it's not going to notice any change now. Just stick it in because I said so. Let's have a look at it. Save, let's go and have a little look. When I said, it didn't make any difference, it is actually, you can see in the top here, there's a bit of default that comes along with the body tag, which pushes it down from the top and a little bit off from the left so it's cleared up the little white border that was there. We didn't say it before, I probably did but I just want to make it clear. You see a white border? You might not have noticed it. But he's there. This forces it up into the top left corner. Lovely. That, my friends is a squeegee video background thing that is really small and fowl size. This gets you part the way. We'll leave this video here, next video, we're going to look at adding type over the top of it, because that's another thing. It's easy enough, but let's go and do it together in the next video.
11. 11 Basic text & images on top of our video background : In this video, we're going to end up with something like this, where we've got some stuff over the top. Got a bit of a nav going and a logo on the top. It doesn't look like much. If you look at how long this video is going to be, but don't worry, if you just look into the thick stuff over the top, that'll be the first 10 seconds and the rest of the time we're getting into some basic HTML, and we're going to build out our site, which you could skip if you like. Let's get started. To add text to a document, that's obviously very easy, just under here on the video, let's actually add our logo. I want to stick the logo over the top. Here is my finished example that I want to do. That's what I want. I want you to bring your laptop over the top and these navigation, and this text and this button. Let's get started. So what I want to do is put it in an image. Now, putting in an image can take forever. It's img space src then you got to put in alt text, there's lots to do. But remember our trick, img then hit tab. Hey, fills it, and thanks Dreamweaver. The source, where I want to get my logo from, I'm going to type in i, for images. Can you see it goes to images, great, click on that. Now there's nothing in my images folder. We just come up with browse, so I'm going to use that. I'm going to go find the exercise files that we downloaded. If you can't find the Exercise Files, you probably have by now, but there'll be a link somewhere, on this page. Let's go to Video Background and let's go to under images, and I've got an SVG in here, could be png, jpeg. Use SVGs if you know how make them, out of Photoshop and Illustrator make them. They're scalable vector graphics and they are awesome for resizing. Nice and crisp. It's not inside my website at the moment. It's saying warning. Would you like me to copy there? You say, "Yes, please." Where would you like me to put it? The images, please. Same with the image files. They need to have hyphens, no spaces. Hit "Save", there it is. The alt text needs to go in whenever you put in an image. This is used by screen readers for the visually impaired, and it's also used for, Google uses it. You've ever done a Google image search, this is how it knows what you're talking about. This is going to get me where I bring in our top logo. Great, let's check in the browser. it's not there. Where is it? It's actually there, it's actually underneath here. What happens is when you put things when the position's fixed, they're all out of sync and they don't know who's on top, and they're all turn up to fight it out. Sometimes the logos on top and sometimes the videos on top. It's pretty much whoever's first in this little list here. What we need to do is go to our CSS and actually tell our full-screen, our video to do something called a Z index. Z index, and by default everything is zero. You know that image is going to be zero so anything under zero is going to slip underneath. Some people put in 100 and some people are 999. It doesn't really matter, whatever flash about. Now let's go and check in the browser. There it is. Hello, there it is, my logo in the top. Essentially, that is it. If you already know how to go in and position things, do responsive websites and put a header in, and the logo in. You can skip to the next video now, because in that video what we'll do is we'll cover things like mobile and responsive stuff. But in this video I'm going to plow on, we're going to build our site. It's pretty basic. If you're new or just getting started, follow along, let's build it, get your skills up. So in Dreamweaver, what we're going to do is go to source code and we're going to build this out now. This logo here, actually, I want the video to be at the bottom. Just because I wanted to, it doesn't really matter where it goes. Enough of this full screen, at least. So I'm going to cut it and put it underneath this guy and mainly, because I want my website to load above it and the video to be the last thing to load, just so this ticks on the screen first and then this thing can load at the end. If you've got a really long video, can take a long time and then it's going to wait for this to load before the things underneath it. Great. So what we're going to do is build out a rough HTML5 structure. Inside of our body, the first thing we need is a header. So I'm putting in header heading tab, and that is everything that goes on the top of my page. In this case, it's going to be, let's call it my mock-up. It's just going to be the logo goes inside of it and my navigation. If you want to call it BYOL in the top here, that would be considered your header. Inside, header I'm going to put my logo, we got him, there you go, and inside you go. You can see it indents things nicely to see where you are at. I'm going to put a few returns in. Returns do nothing in code. Keep checking, have I broken it? No, still looks fine. I'm going to put my navigation in. So navigation goes into a tag called nav, hit tab. Now we're going to put in those three words that I had in my example here. You can see them there, they go inside. Building a nav, you build it like this. You put in the ul, which is an unordered list. That's like a bullet pointed list and we'll remove that bullet pointed lists was installing in a second. Don't put it in, push tab. Put an ul, and inside of that, because the ul is just like the wrapper, inside of it there's li's. Those li's are the different bullet points in here, and I need a couple of them. So I could do this, and so I need a couple of list items. Inside that list item, we need a clickable link. That's called an a tag. If an a enter to, a href is what gives it a hyperlink. Where is it going to go to? I put in a hash because I don't have any way for it to go to yet. This would be, we could write our contact us page.html, but we don't have that,so we're going to leave it as hash. You put in, I can't remember what's our phase 1, what was that phase 1? Portfolio. Portfolio, save. Let's just check it in the browser. You can see there's my first little nav. It's a bit ugly-looking, but that's how navigations are built. They're built with URLs. But we removed the bullet points and the blue, and the underlying and makes them clickable. That makes a good nav. Back into Dreamweaver. What you can do is, you can have your keys inside of this, a duplicate, which is Command-D on a Mac or Control D on a PC, or you can copy and paste it, that's up to you. You can keep doing that. I'm going to show you a super cool way, I'm going to try to impress you with my super skills. Watch this. We've been using this, and hitting "Tab", and I'm like, "it's pretty cool, saves you a bit of time," especially for a nav. What I want is a ul. Inside of that ul, so I'm going to use the greater than symbol, and inside of that, ul, inside of that on an li. How many li's would I like? I'd like five of them please. Inside of the li, I would like an a, tag. I know it seems a bit weird. If you're new, don't do it this way, you just do it the long way. But if you're certain now, you've done a few of the tutorials, and you're starting to get pretty cool, you can do this thing. It's called image. So it's like code hinting stuff and just means maybe a hit tab. It build that whole system for us. It builds an li with a bunch of them. I said five, I really only wanted three of them. Just dumps it and they're pretty cool. I love it when you can save time like that. The other thing is we can do is, and it's a cool thing for Dreamweaver, is multiple cursors. I want to put in a hash, for all of these. Remember when we don't have any way for it to go, we put in the hash or pound sign, but it's not that hard. I could put in hash down hash. Okay, it's fine. But what I can do is I can hold down the command on my keyboard and click a couple of times and you get this multiple cursor. See one giant cursor. It just means that when I tab, I can do that. It'll goes one at a time. You can have these cursors everywhere, which can be cursors I can have. Till you're flushing away. That's not particularly useful, but it's great when you're adding classes for different tags. Anyway, tips and tricks. So this one here needs to go inside the a tag. Remember, this one's PORTFOLIO. What were the other ones? Pricing and Contact Us. So PRICING and CONTACT US. Checking the browser. There they are, big and ugly. Now what we want to do is get them up to the top here. Well, we'll put them side-by-side and get rid of all this ugly formatting. That is done always CSS. So we're going to leave this guy here. We're going to jump into our styles.css. The first thing we do is we'll push them into the top right. So we're going to style the nav. Remember the tags that don't, remember those are the ones we name, these the pre-made ones. So no full stop in the front. We put in our curly braces and to get them to go in the top right, is something called float. We're going to say, "Float to the right, my friend," semicolon. Save, check in the browser. Boom, look at him. All the way over here. He's floated to the right. Let's look at us what we need to do. Next up, I want to style my ul's. So what we do is we say, not just all the ul's on the page. I want to do the ones that happen to be inside of this nav. Because if I do all ul's, I might have a list on another page and it's going to do some weird stuff to it that I don't want it. So just the ul's that are inside the nav, please. I would like you, my friend, to get rid of the bullet points. That's the first ugliest thing. So I've typed in list and there's one in here, called list-style-type. Now if you are unsure what some of these do, can you see down here, Dreamweaver is quite helpful. It tells me what this thing does. I'm going to click on you. Then it gives me some examples of what it can do. In our case, you can put a decimal point, you can put in a disc. I'm going to put in, none. Okay, and then semicolon, save it. So look, cool, bullet points gone. Who is going to keep going through that and keep removing some of the styling. So, the next thing I wanna do is I want to do it to the list items. So I want to do it to these allies, but I only wanted to do to the allies that happened to be inside of URLs that are inside the n-av. Okay? So, you guys, I want you to, be a font size? Font size of 0.8 em-es. Okay, if you've never used em-es before, you can use pixels.It's not, it's not good practice. Em-es is responsive and bit error and lots of ways, all it means is, and by default, a website is set to 16 em-es and the user can go off and change that default if they need to. So if you hide code pixels, that will allow them to do it.So we need to let them pick the font, nobody does change it. We're not many people at least, but we need to abide by the rules for people that need a little bit more help using a browser. So, if I put in one em-e, okay, I would get 16 pixels. So I want 14 em-es, which is about 14 pixels, which is about 0.8 em-es, okay, so use 16 user basis and we get some rough cases from there, often you have to go and test and check. So that will be the font size. What else should we do? I played around with some letter spacing, just to separate them out between the letters. So I'm going to use zero-point em-es. Save it. Let's have a look. You can see it's spaced the letters out. And what else did I do to the font size or slightly smaller than normal, but I want to underline on it, so I can do a line and I want to go to ticks the line. Ticks the line and go to right. Semicolon, then the lining up this way, you might like your styling that way. What I want to do is put them side-by-side, and it's something called "display". And there's a few options. Inline-block. At the moment they are we're using inherent, save job in hand. You can see "inline-block", this means they're going to be in a line. And I want to put some spacing between them. So I'm going to put some padding in and I put some padding on the left. If I put it on the right, it's going to look a little weird. I'll show you what I mean in the middle. I've decided that 50 pixels looks good. I put it on the left-hand side. So this has got, that's got so contact me on the left. Parsing on the left.This one on the left, you don't notice. You put it on the right, it's going to push contact away from the edge.You might want that. Let's go. Let's go and move the colors and the underlines. Now we can't go and remove the color and underlines from this little group here, just doesn't work. The list item is the kind of list, but not the actual fonts itself. So we need to go down a little bit lower. And in our case, it's the a tag. And if you're unsure which tags to be styling often, it can be really handy, if I click inside of here, you can see there's my a tag which is inside an ally, which is inside a URL, which is inside add widgets inside of my head, which is inside of my body. You could write all of that out. So we just did the ally. You could write all of this out, but there's no real point. And that's unique enough as navigation, so it stops there. And so I want to start my a tag, which is inside this and inside this. So let's go and do that. So I would like to style, my friend, things that a tags, that are inside the allies, that inside the URLs, that are inside a n-av, and curly braces. I want to do a text-decoration as the first one, and you can see you can put an over-line, underline, line through. I want to go to none because by default has an underline. Nobody likes it. And next one is going to be the color, colored just by itself, does the font? You can use your color picker. Pick any color you would like. If you know the hexadecimal number. I'm using RGB here, Because you can use transparency and it's new and it's awesome and it works on little browses.You could just use Hicks if you're used to using those little hashtags. Nothing wrong with that. It's not too old school. You can even do this when really, you can write white.That works too. Alright, so, now I have some links that are clickable, didn't go anywhere because I've got those little hashes inside.There is no error as though either, some spacing because this is line spacing. Let's look at doing the font. Now we could stall the font here. So I could go in here and say font family, and I can tell what to be. Now, the only trouble with that is that the next thing I do, which is going to be this bit of block text here, is going to be the same font. So I'd have to say it again. Then this p tag saying "font button, same font". The whole website is going use Aerial. So what we do, is we say, instead of styling each individual tag, is at the top here. And we've got a body tag. We say you my body, I like everything that is inside this body tag, which is everything on my page. Remember, I'm going to have a font family of, and what are we going to pick, there's a bunch of groups here. I don't like these little groups. I prefer just to have Aerial, put in a comma and then I'm going to have a full back of Sans Serif, semicolon,nice. Now, if you want to use other fonts, Mao Open Sans, Soil Sands, like the New Aerial. You can either use Doby's fonts or you can go off and use Google fonts. And we're not going to cover it in this one because it's got to be pretty apically long anyway. But check out any of my other courses, especially the Bootstrap one for Dream-weaver, that'll cover fonts and a lot more detail. So that's how fonts done. For everything that appears on the document. So the next thing that we're going to do is I'd like to my example of Cs tucked him from the inch. Kids kind of like a fixed width and the middle and the stretchy outside.That's what I want to do at the moment. My example here is, he kind of disguise firing all the way to the right and all the way to the left. It's not quite what I want. So I want to put in some like fake borders in here. So let's go and do that. It's quite easy. Can we do it just the body. The body is the middle of everything. We say "you body, I would like to have a maxed width of", its' up to you what you put in, and I'm going to put it in 1024 pixels. It's either that or 1200 of that, like really, common sizes. And so, 1024 is the maximum width that box can be. And let's have a look. It's going to be kind of work. So it's fixed it to that sort of size, but as defaulting to left, so we want to stick it so it's strictly in the middle. So it's still can see max-width is really nice for responsive sites. So don't put it in the width because that'll physically tell up forever be 1024, whereas max-width says be whatever up until a maximum width obtain 1024. Responsiveness. So, and to get it to be centered, it's something called "Margin order". So you can put in margin left and you put in order, and you put in margin right, put in order, and that just means I'm going to be centered. Okay, so what we'll do is we'll leave this here. I know we're not finished yet but what I'm going to do is I'm going to break this into two pots, so it's not so long. So that'll be us for the moment we'll go through, and do the rest of the site. If you feel like "I don't know what I'm doing now", jump to the next one again, and one after this, and you can look at the responsive mobile stuff of the video. Because now we're just getting into basic web design, which is cool, and getting our scales up. But you can skip along if you like. Alright, see you next one.
12. 12 Production Video Building the rest of our website : Hi everyone. In this video we are going to finish off building our site, just adding some texts, some horizontal rows, make a little button, and it's going to be all responsive and video-ey. Let's go and do that now. The first thing we'll do is we've got our header, we've got our nav in there, and there's our image logo. What we're going to do now is add the main part of the website. Luckily, the HTML tag is called main. This is where all your main stuff goes. Now, our main section, if you look at our mock-up here in Photoshop, it's pretty basic. This website is probably a little unrealistic. You are going to have a little bit more content on here. Often you break your main up into different sections. Our main section, here we go, is going to be this. Then you can have two sections. You might have the section for the hero image and underneath might be some thumbnails and they might be some testimonials. They can all be in different sections. You can also just call them div tags. We are just using more standardized HTML language here, but div is fine as well. Inside of this is going to be my big heading. Where is the big heading? This thing here, "creativity is a wild mind and a disciplined eye." What I'm going to do is type in h1. Add tabs. So our h1 is our heading 1, our most important heading on the page. You need to have an h1. There it is there. Let's go check it in the browser. There is it. That's what an h1 looks like unstyled. Normally he's Times New Roman. But he's Arial because remember we set Arial to the body, so everything inside is being Arial, but there's a good bit of styling we need to do. He needs to be uppercase and white. He needs to be pushed from the top. Let's push him from the top first. Let's look at that. In Dreamweaver, what we want to do is we could put some padding at the top of h1 , the only problem with that is every page needs an h1 and not all of them, again, need that padding. What we can do is actually we can say the section, we can give it a little class and tell that section to have some padding, just to push the h1 down. Let's go and do that. I could style a section, but remember probably pages are going to have more than one section, so we want to give it a little bit of specificness. It doesn't matter if you create the class here and then build it in the CSS afterwards or build it in this CSS and apply it here second. I'm going to give this a class, maybe we get to name these ourselves. I'm going to call this one my hero box. Okay, I'm just actually going to put hero. It's got a class name here, and I've got my styles. I'm going to make a class down the bottom here. Now what goes in front of a class? That's right, full stop or a period. I'm going to call it hero, curly braces. Push retain, separates them out. What I'd like to do is do some padding on top. How much? I have already worked it out by playing around a little bit, and this is going to have a padding of 80 pixels. Save. Let's have a look. Here we go. Push them down from the top. Let's go and style h1 now. Then my CSS down the bottom here, and put in my h1. Because an h1 is an existing tag, it's not class that we created, we just have no period at the front. We are going to add some stuff to the h1. What we'll do is go to font size, fonts, there he is there, size of 4.6em semicolon. Great. What else? We're going to give it a color of white, it's #FFF. We can use the color picker there, we'll type in white. I'm going to make it uppercase. So it's text transform is the one I want. You can see there, I can make it lowercase. I'm going to force it all to be uppercase. Nice. In my case, I want the margin just underneath it. A little margin underneath it to be a little bit bigger of 20 pixels. This will allow me, what I might do. There's a bit of a gap underneath I want to push it down where this horizontal ruler goes in. Get in the browser. Cool. We're kind of there. It's big, it's bold, this is exactly what I wanted to do. The only thing is I want to smush up on this left-hand side. Let's look at Photoshop. I wanted to line up with this. I'm going to add some padding to the box. We did it before we added it to the top of our hero box to push it down. We can do the same for the padding on the right-hand side to push it over. Into Dreamweaver. We did it here in my hero box. I'm just going to add some padding to the right, and it's going to be 250 pixels. I'll also add some padding to the bottom just to push it off at the bottom, because otherwise all the text it smushed at the bottom there. I want to have it lifted off a little bit. Let's have a look. Awesome. A turn of 50 pixels over there, and what was it? 80 along the top there, and there's a little bit down here at the bottom just to keep everything off the bottom. Back into Dreamweaver. Next thing is the horizontal ruler. I want to put a line just underneath it. There's a couple of ways of doing it. The easy way is just underneath this h1. Put in something called an hr tab. The weird thing about an hr is everything else has an opening and a close, the hr doesn't. It's just by itself. Let's check it in the browser. There it is. There's my horizontal ruler. It stretches all the way along. What we can do is style it a little bit. Now we're going to use a handy dandy new little trick. We've been jumping between this, and this, and this, and this. Dreamweaver 2017 at least has this new feature. If I right-click him and go to this thing called "Quick edit", it is awesome. What it does is it opens up this little whim halt to your CSS. What it does is it says, "At the moment there's no styling for this hr. Would you like to make one?" You say, "Yes, please New Rule." You can see I'm actually in my CSS sheet on line 55. It's actually put in the syntax I need in the curly braces ready to go. Cool huh? I'm going to put in a height of it. At the moment it was only one pixel, I'm going to put in 10 pixels, that's a bit thicker. Let's save that and see what it looks like. You see that's what our horizontal looks like with a height. There's a couple of things we need to do to make it look good. We need to put in a background color. Background color of white or FFF with a hash, semicolon. The only trouble is you might not be able to see it even if we zoom in. You see there's a weird border around the outside. It's just default on a horizontal ruler. What we're going to do is set the border to zero pixels. Now, it might not look very different, but it bugs me that thing. Anyway, that is it. You can give it a width as well if you wanted to. At the moment, we've given it a height but no width, I'm letting it go to that padding that's gone on the side here, you can tuck it into be small if you like, by just giving it a width, I'm going to leave mine. Next up is the text that goes underneath. Let's go and add that. Actually before we do that, let's close this down. Let's get check in the styles and you can see the bottom here is my horizontal rule. It just saves you going in there to change it. We'll create it at least, let's go back to source code and let's put in our bit of text. Now, text, Jimly, is contained in a p tag. That's the body copy text on a page. H1's beheadings and pretty much everything else, but it's not an H1, 2, or 3, important headings, it's a p tag. What we're going to do is inside this p tag, we're going to put in a bunch of text. You could smash away keyboard and put in fake text, that would work. But there's a nicer way of doing it using Lorem ipsum. If you're a designer and you're like, great, I'm going to go there, it's at lipsum.com and go get that text from there. It's not a great way of doing it because copying and pasting from that site can bring through code that we don't want in our website. What we're going to do is it's built-in to Dreamweaver. If I type in Lorem and hit tab, look at that, it's a built-in Lorem ipsum. Cool. I know how many words, let's say you're working with a copyrighter and the copyrighter is writing to a writing schedule, so he's writing 200 words for the homepage and these many words for this page. So you've got a rough idea when you're designing, well, how many words it's going to be. Let's say, I know my words is actually 52. I don't know. It's quite precise. You're never going to be that precise. But the cool thing about this little shortcut in Dreamweaver is Lorem and you put in 52, hit tab, that's exactly 52 words, really handy. Let's save it, check in the browser, there you go, there's my p tag. By default, it's black, 16 pixels, or one em. Let's go and fix that now. We'll use our sneaky trick. Right-click it, quick edit, there is no rule, create it with a p tag, and I'm going to do color. Color by itself, remember, is this white, fff does. The only thing I want to change is probably the line height and it's going to be 1.5 em, so one-and-a-half line spacing. The default is one em and I'm happy with that with the body copy, it's a good size, but I'm putting the line height in, the space between lines, all the [inaudible] , let's check it. Nice. Now, one thing I just noticed at the top here is this, that is the syntax from this, I have no idea why that's here. Let's go and check. First of all, I'm going to refresh this page. Disappeared. That's good. So my little preview here had a little bug, I think. No idea how that came. I'm going to close it down. Awesome. I think it's that quick edit thing, that maybe there's a little bug with that, but it's all gone nicely now. Lovely, so let's put an owl button underneath. It looks like this in my mock-up. It's just some text with some stuff around it, but it's clickable, and how you build a button like that. All that is is an a tag, like we did for a hyperlink, which we've done up here. Remember our a tag, so a, and hit "Tab." Where's it going to go? We're going to put in our placeholder pound sign. What is the text? It says check our portfolio. That's going to give us some stuff, let's have a look. Big and blue. We're going to do the same thing we did up here and just remove the styling, plus we'll add some borders around it. To make this happen, I need to add a class, because if I start all the a tags, every single a tag on every single page is going to be stalled and I don't want that. Remember we're going to add a class. Great. I'm going to give it a name, I'm going call this one my button class. Sometimes calling a button's not a great idea if you're using, say, bootstrap because they use that syntax. You might call it something else, you might call it my call to action. That's a bit of a long name. That's my class. I'm going to go into here in my styles, down the bottom, make a class, and then the classes have a full stop in front of it. Afterwards, put in now curly braces. What I'm going to do to it is, first of all, background color, background color. It's we're doing that to a link, but what it's going to allow us to do is add that red border. You could make a box and put the text inside of it, but it's easy to use the text and make a border around it, if you know what I mean. I know I'm using f1474c, semicolon this, that red color. A cool thing in CSS now in Dreamweaver, if you hover above, it, should give you a little icon. Handy. Other things I want to do, actually, let's check in the browser, you can see, there's that red color, but, to make it more like a button, we need to add some padding around it. You can go through and say padding top, padding left, padding right, padding bottom. I got those mixed up, but you can edit all four of those properties, but now in CSS, what you can do is just add padding, and what happens is, it assumes, you can put them in order, I'll show you, so I want the top to be 18 pixels. You can see that little popup here. You can see if I leave it like this, it's going to apply to all four of them, so I'm going to have padding all the way around. I put my semicolon, save it, have a look. You can see this 18 all the way around, rather than having to define all four of them. You can actually get a little bit more clever because I want the size to be so the top is 18, but I want the right to be 30, nearly double. You can see here, now it says top right is 30, bottom is 18 and 30 it duplicates these. Essentially, it goes clockwise, starts at the top, goes right, goes left to bottom. What I could do now is go 18 pixels and 30 pixels, just to make it maybe clearer for you, instead of writing top, left, bottom. Anyway, let's go save it. Let's go check. Awesome. I want to put some spacing between these lines, so what I'll do is I'll put in a line-height, Sometimes you can put a padding above, but in this case, line height is going to work better for us. Four ems, save it. Nice. Push it away from there. Let's changed the color of it, to fff, and get rid of the underlined, and we did early, remember. Text decoration and we're going to go none, please. Get rid of that underline. Let's have a look. Looking good. Click, it's clickable. It's a nice little button. Quite simple to do, a little bit of CSS on your HTML, nice and clean code. You just got this a tag with the class around it. Nice. All right, my friends. We have made a cool little site. That's the end of it, because pretty much everything else if you want to add more, you can add another section. We're not going to go into huge detail on this one, just a bit of an exercise to build that site. So we've done that now. Next step is to look at some responsive stuff. What have we done? We've made this site. It's a boring old font, Arial, I know, but we've got a nice, cool video in the background. If I resizes, it goes in the background, got a clickable link. It's pretty cool. One thing before I go, I can't help myself, you see padding on the top here, it's too close. What we can do is add some padding to the header. In here, my styles.css, I'm going down the bottom and I'm going to create header, and inside of here, I'm going to say padding. I'll just do the top in this case and I want to add 30 pixels please. It's off the top. Lovely. All right. That's going to be us. Yeah, let's jump into the next video.
13. 13 Make a fullscreen video background mobile friendly & responsive : Hi everyone. In this video, we're going to look at making our background video ready for mobile. What we're going to do is, you can see the video is playing in the background here, but when I shrink it down to mobile or mobile simulation, then you can see the actual video turns off just with the colored background there. Now why are we just making a video ready for mobile? Mainly because mobile manufacturers or at least their operating systems don't leave videos play. They don't leave them auto-play, you can still have videos on your site, and with your host and yourself or YouTube. Those are still fine because those allow users to press "Play" and say, "Yes, I'm going to use that playing this video." Whereas automatic background videos, they start playing without any controls. So they don't want for a couple of reasons, one is data. You might be out traveling and just not realize you're chewing up lots of video data because this website is playing this big long video in the background, so that's one of the reasons. The other reason is CPU usage. If you've ever watched a bunch of videos on average looking laptop, it can burn through the processing power and the battery pretty quick of a laptop, and on a phone obviously, it's a lot more of a deal. It's actually really easy to do mobile versions or responsive versions of this video background, because we're just turn it off really, and replace it with a background color. Let's go and do that now. Let's jump into Dreamweaver. What we need to do is jump to our styles.css and we're going to put in our first media query for this job. Now if you're not familiar with media queries, we are only really going to cover them basically here. If you want to get right into a responsive website, that is the job for another tutorial. To get my coding for designers with Dreamweaver 2017, we cover fully [inaudible] mobile tablet desktop versions, but the skinny version is, as you put in something called @media, and that's immediate query. We put in something called a max-width, and in our case we're going to pick 400 pixels. Now they're going to put my curly braces. What a media query does is that the browser will check to see how wide the browser is, and if that browser is 400 pixels or less, it's going to activate the code that's in here. For us, that's going to mean, we're going to tell a video to turn off at that thing. That's all media queries are and that's re-quarter responsive web design, is you have a very stiff immediate queries that tell things to turn on and off depending on the screen size. So what I would like to do is I'll add that video tag, so I'm back here in source code. There is there, that video tag here. What I'd like you to do is turn off when it gets to mobile. If you do it this way, if we turn the whole video tag off, it just means that every video on our website, it's going to turn off a mobile and that might not be necessary to what we want, so we're going to inhibit this class we edit earlier called full-screen, we'll add him as well to make it a little bit more specific. Video and then put in a full stop and put in a full screen, more curly braces, and what we're going to say is display my friend of? None, semicolon. Now what should happen is that, when it gets to a screen width of 400 pixels or less, it's going to activate this bit of code only at that time and it's going to turn the display to none for this specific little thing here, that video.fullscreen. Let's go check it. So here is the desktop, going down, and going to be a mobile screen a day, it's gone. Well, it works. My text is white though on a white background. You can see the text it's a little bit messed up here, so we should go through into a fully responsive site, but we're going to keep this focused more about video backgrounds. If you want a full sites, there's a bunch of tutorials that I've got for making full sites, but let's go and try and switch that out to have a color. So nice and easily. What we'll do is the body here, we'll say you've got a background color. Of what color? I've got one here in my CC libraries. We're not using CC libraries. You don't have to, they're awesome, but that's the color that I want. If I hover above it, you can see that's the color, so let's check it in the browser. So up here for video, we're going to get into mobile, a nice quick fast loading color background. Ignore the text, those all, I messed up a little bit. That's how you deal with videos that are on mobile. It could be a background color, you could seek it out to a background image if you wanted to, up to you. So that's us lovely web design people, we've got our video going in the background, and it switches out for a colored background when it gets down to the mobile screen.
14. 14 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 the containing div tag here. You can see this one here instead of being fully background, it's inside this nice little light litter box shape here. What you can see here is when I re-size it, you can see the video gets smaller and changes. Now this existing video is from a previous tutorial where we built a site in Dreamweaver using Bootstrap. We're just going to jump into the end of that one and jam this video in the background. The cool thing about this is that if you've done the previous tutorials, it's pretty much exactly the same but a couple of little changes. It's a lot more important where this goes. We need to find out what div tag it's going to go into, and we looked at this, they're like hero box. This website I'm looking at here 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 I want to find the hero box, and that's where I want to stick in this video. Where does it go? You might have to play around with this, it depends on how you formatted your site. If you followed me exactly, it goes in between row and this column large here 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 the row, or inside the column, or inside another div section you've got, so just play around with it. It's like it was before. We're going to put in video even and then SRC for the source. We are going to get this video from here and click "Browse." I don't have one in the site, but I've got my exercise files, my desktop under video, and that's the one that I made earlier in premiere pro. 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 going to make a folder called videos. Great. Save, cool nearly done. 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 video tag. Let's check what that looks like in a browser. Hey, it works. That is just a cut add a video to a page. Not as a background, so let's do this next, but 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 give it, we could use the video tag. But again, if we use the video tag in 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 you're going to do is give it a class, remember our classes, something we get to add and name that we get to pick. We can call this thing anything we like. Stretchy background thingy. Never a column this long, there's nothing wrong with it except like me, I've developed a friends who end up opening my website and either laugh or cry at how long some of my classes are. I'm in main.css. What I'll do is I'm going to put mine near my hero box here. So just underneath, we have a period at the beginning, and then paste it in for a class, calibraces. Inside of here, this is where we're going to add some of the things. This needs to be set position first of all. So the position is going to be where we used fixed up until now and the other exercises. So let's have look at fixed. 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. 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. That is like we did the full background video, we put in a min width of 100 percent semicolon, and a min height of 100 percent semicolon 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 stick it in. So height and width, are auto, auto. Let's have a little look and it's working, we're getting there. It's stretching the whole height. There's a couple of things we need to do. First of all, we will need it jammed up in this corner, because it's missing out. It's using this some padding in this box here, so we need a full set up in the corner. You might not have to for yours. So this is optional. Mine definitely needs it. So left, I'd like you to be zero pixels, so it's going to be all the way in the left. Then we're going to set the top, to same, zero pixels. There is edge end up on the top. Now what we need to do is get him, he's doing everything we want, he's resizing, he's responsive, but he needs to be jammed and know what the the div tag that he's inside of is doing. 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 like sticking him in 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." He gets told to be relative, this guy uses that as his basis. We've got a responsive background thing. That is it, if you want to just go from instead of a full background to just one inside of here. Now, for us, one thing we didn't have to do, and lots of examples you will is you must play around with the C index. You might have to set this, really depends on how you want to work it but say the stretchy background might be have to be set to Z index of maybe minus one or minus 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 it's sitted behind the guy over here, the band hero is now at zero, so this guy is behind it. The band here 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 the Z index because it doesn't look like I need it. But I could do minus two. Then behind that, if the video doesn't load on mobile screens, it will load the background image. That's pretty cool and pretty simple. You my friend now are background video expert. That's where we will leave this video, headed up.
15. 15 Cheat Sheet: Tip number 1 for adding full screen background videos to website, you can't do it from mobile. It sucks, but the mobile manufacturers don't like you having auto play videos because of data, it'll waste that, and it burns through the battery life. The CPU goes nuts when it's try and play videos. Basically we just turn the video off when we get down to mobile, switch it out with an image, and live with it. That's tip number 1. Tip number 2 for making full screen background videos is file size, and how to get it super duper small. The only thing you really need to do is grab your video, put it into Adobe Media Encoder. Go to Custom, scroll down and the thing you want to play around with is something called the bitrate. Stick it to variable bitrate 2, and there's options, there's two little sliders that connect 1 and 1.51, and export. You'll go from a 20 megabyte file to a one megabyte file. It is crazy good, and the quality is pretty good. That is tip number 2 for making full screen background videos. Tip number 3 for making videos as a background on a website. This is for specifically using the little letterbox version, where you got little box, and you put the video in the background. When you're editing your video in something like Premiere Pro or Media Encoder, you need to chop the tops and bottoms off. There's no point stretching it, so it just covers. You'll have all these bands that a wasted and that is file size, and that is our nemesis when it comes to background videos. Chop them off using the crop feature, or in Premier Pro, go to composition settings, sequence settings even, and just change the height down to something smaller. You can do it in Media Encoder at the end as well, so that's tip number 3 of I think we've got eight probably. Tip number 4 all of eight for making video full screen backgrounds on a website. This one is what formats are used. Pretty much, you need MP4, which is the most shareable usable one there, and then you need a fallback one. Forget about OGG oggs now. It's all about WebM with an M, that is the next fallback. You just need two video files. Those are the two you need. Tip number 5 for adding full screen background videos to a website is adding all that cool grain, or blurriness, or washing it out a little bit. We do that really for two reasons. One is it looks quite cool, and we can get ticks of to the top of it if you darken it. But the other reason is that we have to use quite small file sizes, and it gets a little pixelated. What we do is we blur it, or add the dots, or the film grain over the top to hide that. It makes it less obvious that we purposely grimed up instead of it's just a bit bad because we've had to use low quality. We do have two reasons: cool and to hide the bad pixels. So that's tip number 5 of 8, I think. Let's do the next one. Tip number 6 for adding background videos to a website, the full screen ones, is that not all videos are the same. If you've got a video with lots of different things going on, its action, and there's things flying around, lots of colors, lots of motion graphics, that is going to have bigger file sizes. It's just more colors, more going on. The colors are moving, more data, bigger files. What I'd done in this class exercise here is there's got a little bit of the hand moving around, and so it gets very, very small. Not all videos are created equal when it comes to file size. We're up to 5, 6, 7. I've counted up my hands before the film starts running because I'm never sure what tip I'm up to, and It looks like I've skip tip number 6, so we're just going to straight to 7. This tip is an easy one. You take your video, and you make the background just a little darker. It looks quite cool and moody, it also lowers the file size. It means you can put type over the top. Some white takes over the top if you've lowered it a dark color. That is tip number 7 for putting full screen background videos on a website. We're up to tip number 8, I've counted it out already. Tip number 8, this is the last one of how to add video to a website background. That is you can do some stuff in CSS, things like blurring, you can mute the video. Don't do any of that in CSS. Why? Because some of it's not supported across all browsers, that's how [inaudible] of our life. But also the big reason is that if you have a video and it has audio, that file size is going to load. The fact that you mute it later on, it doesn't change the file size. It does mute it and that will work, nothing wrong with that. But the file size, all that audio is included in your file size. The same with things like blurring. You blur it, that actually lowers the file size because you get less detail unless mix up with pixels. Do all of that sort of stuff in the video first and something like Premiere, or After Effects, or Media Encoder before you get to CSS.
Daniel Scott, Adobe Certified Trainer
