Cheat Sheet

FREE CHEAT SHEET PDF DOWNLOAD HERE 

All right, tip no. 1 for adding full screen background videos to a website. You can't do it for a mobile, it sucks, but the mobile manufacturers don't like you having auto-play videos, because of data, you will waste that and it burns through the battery life, the CPU goes nuts when it's trying to play videos. So, 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 no. 1.

Tip no. 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 bit rate. Stick it to video bit rate too, and there's options, there's two little sliders, they can have 1, and 1.5, and export. You'll go from a 20MB file to a 1MB file. It is crazy good, and the quality is pretty good. So that is tip no. 2 for making full screen background videos.

Tip no. 3 for making videos as a background on our website. This is for specifically using the little leather box version, where you got a little box, and you want to put the video in the background. When you're editing your video in something like Premier Pro, or Media Encoder, you need to chop the tops and bottoms off, there's no point stretching it, so it just kind of covers, they'll have all these bands that are wasted, and that is file size, and that is our nemesis when it comes to background videos, so 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 no. 3 of, I think we've got 8, probably.

Tip no. 4 of 8 for making video full screen backgrounds on our websites, and this one is for formats that I use, pretty much, you need mp4, which is the most shareable, usable one there, and then you need a fall-back one. Forget about OGG, OGG’s now, it's all about webM, with an M, that is the next format, so you just need two video files, those are the two you need.

Tip no. 5 for adding full screen background videos to a website, is adding all that cool kind of grain, like blurriness, or washing it out a little bit. We do that really for two reasons, one is that it looks quite cool, we can get text at the top of it, if you darken it, but the other reason is that we have to use quite small file sizes, it gets a little pixelated, so what we do is we blur it, or add the kind of dots on the film grain over the top, to hide that. Makes it less obvious that it's kind of like purposely grounded up instead of, it's just a bit bad, because we've had to use low quality. So, we do it for two reasons, cool, and to hide the bad pixels. All right, that's tip no. 5 of 8, I think, okay. Let's do the next one.

Tip no. 6 for adding background videos to our 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, it's action, and there's things flying around, lots of color, 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've done in this class exercise here is, we’ve just got a little bit of hand moving around, so it gets very, very small. So, not all videos are created equal when it comes to file size.

All right, we're up to tip no. 5, 6, and 7. I have to count it on my hands before the film starts running, because I'm never sure what tip I'm up to, and it looks like I've skipped tip no. 6, so we'll just go on straight to 7. And this tip is an easy one. You kind of like, take the video and you make the background just a little darker, it looks quite cool and moody. It also lowers the file size. And it means you can put typo over the top, some white ticks over the top if you've lowered it to kind of a dark color. And that is tip no.7 for putting full screen background videos on a website. 

All right, so we're up to tip no. 8. I've counted it out already. So, tip no. 8 is the last one of how to add video to our website background. And that is, you can do some stuff in css, things like blurring, you can tint it, and you can mute the video; don't do any of that in css. Why? Because some of it is not supported across all browsers, it's the bane of our lives, 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 is that you mute it later on, 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's included in your file size. The same with things like blurring, you blur it, and it actually lowers the file size, you get less detail, and less mix-up of pixels, so, do all of that sort of stuff in the video first instead of in a Premier, or After Effects, or Media Encoder before you get to css.