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. So, 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, well, mobile kind of simulation, this spin, you can see, the actual video turns off, just with the colored background there. 

Now why aren't we just making our video ready for mobile? Mainly because mobile manufacturers, or at least their operating systems don't let videos play; they don't let them auto play, you can still have videos on your site, when you're hosting them yourself on YouTube, those are still fine, because those allow users to press play, and say, "Yes, I'm going to start playing this video," whereas automatic background videos just start playing without any controls, right? So that I want for a couple of reasons; one is data, you might be out travelling, and just not realize you're chewing up lots of video data, because this website's playing this big long video in the background, so that's one of the reasons, and the other reason is CPU usage; if you've ever watched a bunch of videos on an average looking laptop, it can burn through the processing power, and the battery pretty quick of the laptop; on a phone, obviously, it's a lot more of a deal, so it's actually really easy to do mobile versions, or responsive versions of this video background, because we're just going to turn it off, really, to replace it with the background color.

So let's go and do that now. So, let's jump into Dreamweaver. Okay, so 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, well, I'm only going to cover them basically here. If you want to get right in, like a responsive website, that is the job for another tutorial. Check on my "Coding For Designers With Dreamweaver 2017." We cover like fully headed mobile, tablet, desktop versions, but this key version is, you put in something called '@media', and that's media query; we put in something called 'max-width', and in our case, we're going to pick 400 pixels, '400px'. Now, you get to pick-- I'm going to put in 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. And for us, that's going to mean-- we're going to kind of tell the video to turn off that thing, so that's what all media queries are, and it's just a kind of quarter responsive web design, is you have, first, is a media queries that tells things to turn on or off, depending on the screen size, so what I would like to do, is I'd like that video tag, so I'm back here on 'Source Code', there he is there, that video tag here. What I'd like you do to do is turn off when it gets to mobile. If we do it this way if we turn the whole video tag off, it just means that every video on our website's going to turn off on mobile, and that might not be necessarily what we want, so we-- remember, this 'class' we added earlier, called 'fullscreen'? We'll add him as well to make it a little bit more specific, so video, and then put in a full stop, 'video.', and put in 'fullscreen', curly braces, '{  }', and what we're going to say is, "Display, my friend, of  'none'." Semi colon, ';'. 

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', 'display: none' for this specific little thing here, the 'video.fullscreen'. Let's go and check it. So, here he is, the desktop, going down, going down, and it's going to be a mobile screen, and hey, it's gone. 

Its not, but it works, my text is white though, on a white background. You can see the text is all messed up here, so we should go through and do a fully responsive site, but to keep this-- we're going to keep this focussed more about video backgrounds. If you want a full site, there's a bunch of websites, sorry, 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," '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; Nice!

So, up here, full video, when we get into mobile, a nice quick fast loading color background; ignore the text, it's all messed up a little bit, so that's how you deal with videos that are on mobile, it could be-- instead of a background color, you could stick it out to a background image if you wanted to, up to you. All right, so that's us, lovely web design people. We've got our video going in the background, and it switches out for our colored background when it gets down to the mobile screen.