 What is going on everybody my name is Wadi and you're watching my channel Wadi the Brand. I hope that you're having a fantastic day Today we're going to create a full screen background video with all to play no sound that is also responsive And I will show you a workaround for older generation iPads and browsers in general that Require user interaction in order to play the video You might have already noticed that browser vendors such as Microsoft, Google, Apple and Mozilla are already moving towards stricter policies in order to improve user experience such as reducing data consumption minimize the incentive of installing ad blockers and Constraint networks and so on Which might seem like a pain for us But when you think about it, it's actually quite beneficial to the user If this is something that you'd like to see stick around tap the like button Subscribe to my channel and if you have any questions, please comment below and now let's just jump on a computer and get started Oh, and welcome everybody. Let's get started with this video. First of all, I have already created my project folder I am using Visual Studio code. So if I go to Explorer These are the files that will be using today. So on the left side, we have index.html We have a JS folder which contains a file called script.js and we have a CSS folder Which contains a file called main.css Technically speaking, I could bundle everything in index.html just because this is a tiny project But I like to stay organized and that's why I've split up everything Last but not least, we need a video for this video and I've already downloaded one in my project folder called purple grid And this comes from a website called vitivo.net and I will link it in the description below Now before we begin, I wanted to mention that for this video, I will be using the extension code a live server Which means that every time I make changes the browser will refresh automatically But also I will be able to use my ipad mini and My android phone so we can test the video now the reason I'm using the ipad mini Which is a second gen. I believe It's one of the really old ones that you cannot longer update and I've got an android as well and the reason for that is because different vendors do Things differently the way you handle video playback, but in general most of the vendors no longer allow all to play with voice on so the video has to be muted and Some browsers such as the ipad mini which I believe has a very old browser now Needs a user interaction. So we're gonna have to sort that out as well All right, let's begin by writing or html This should be quick and easy thing to do with using the emit abbreviation tool So if you start typing html, so if you start tapping html html 5 will pop up Press html 5 and let's give or document a name. So html 5 full Screen video Simple like this would do. Let's think up. Let's let's link or style sheet now. So link CSS and all style sheet is on the css Main.css. I think the phone was going off All right And now let's Add or JavaScript as well so we can do script source and then do JS is the folder and then script.js make sure you close this and we should be good to go To test the live server We can simply do h1 Word and if you want to start your live server, you can go to the explorer and right click on index.html and open it with live server So I've already opened mind in here So if I refresh and if I refresh the tablet and if I refresh the phone Technically speaking now every time I make a change. So let's do 123 and save it You will see that we're getting the update straight away on my phone and my tablet and my computer, which is great Now let's remove this and start Adding the video To add a video element. It's actually fairly simple win with html5. We can just do a video And just make sure you close it inside the video is where the sources will go and And I'm just going to copy A message that you've probably seen quite a lot. So You can add a few different types Of sources or like mp4 is what we'll be using today, but you can add more And if the browser does not support That source you can paste a message called your browser does not support This the video tag and now let's add our source which is And to do this we can do source And then src, which is stands for source again And then inside here I can just pull the video that I've already downloaded with this name Dot mp4 and just close All right, if we save this Go back to the browser. You should see that we are getting the video And also we're getting the video on my android device, which is the moment using Brave, which is a chromium browser. I'm using brave in here as well. But I've also tested this in edge firefox safari 14 is this Safari 14, I believe Yeah safari 14.0. So I'll make sure that it all works on those browsers Now at the moment, we're not seeing the video on the tablet and I believe that we could potentially fix this by adding autoplay on this And equals Autoplay and this is the best method that I've seen that works Quite well. So if we save this As you can see the video is now appearing on my ipad. I'm a phone But we're getting this Scroll with scroll, which we'll have to fix in a little bit But before we do that, let's make sure that The video is actually autoplaying On as many devices as we can make it so to do the So we've already done the autoplay But the reason that the video is not autoplaying on our browser It's because Um and the reason that you didn't see the autoplay it's because the video is actually only a few seconds long So here is just going to stop at some point and if I refresh as you can see the video is actually playing But if you look at the tablet, the video is not playing on the tablet And the video is not playing on my phone. The video needs to be muted in order to work on my phone First of all, so what we can do is set mute it Just like this and if you refresh you should see that the video is actually playing now on my phone, which is pretty cool But the video is so but it's not yet playing on the tablet and we're gonna have to sort that out in a minute So the next thing that we want to do is make sure that the video is looping loop And that's easy to sort out so press save and if you go back You should see that the video is going to keep looping which is pretty cool Now let's make sure that our video is nicely centered in the middle of our screen No matter whether we are using tablet phone or desktop to do this We can actually give our video a class name or an id Whatever you wish, let's give you the class name for the styles and Let's give it an id later on So we can do stuff with javascript, but either way it doesn't really matter. So let's give it a class name of full screen video maybe and I will copy this open my save of course open my css file which is main.css And start and let's make this full width Now this is kind of like an old school trick that you can do to make it full width And what I will be doing is making the video position fixed On the whole screen with the zet index And then we need to do some trickery to Make sure that it's always in the middle and is full width. So let me show you So first of all, let's start with the position fixed Then we can do Overflow hidden because we don't want the scroll bars Then we need to push the video 50% from the top and the left which I'll show you in a second. So top 50% left 50% and if I was to save this you'll see that the video is kind of like the Kind of like the anchor point the angle of the the corner of the video is literally right in the middle screen Which is exactly what we want and then we're going to do some trickery with Transform and translate in css to move it to the left and top. So Let's continue now. We also need to send min width to 100% min height 200% And we also need to make sure that the width is auto The height is auto and now let's do the transform so we can move the video back into position so We can do transform And then we can do translate x and translate y which is one is diagonal one is horizontal. So let's do translate x minus 50% And then let's do translate y minus 50% save this and let's see what happens So as you can see this is already full screen Which is awesome And the last thing that I want to do is make sure that we set a z index to or video just in case it gets in a way and with other elements so we can do z index minus 100 whatever like let's just do minus 10 because we don't have so many elements in here So let's save this. Let's have a look again. And as you can see It's perfectly centered on my tablet And it's perfectly centered on my phone, which is brilliant. So the next step is to actually have a look at how we can How we can make the video play on the ipad as you can see the other browser is absolutely fine And to make it actually work on the ipad is not ideal But it's not the end of the world either We basically we can basically trigger the video to start playing on user interaction Unfortunately, that's the only way So let's get going. So to do this First of all, let's go back to or index dot html and we can close the css from now as we probably won't need it anymore Maybe later on I can show you another trick if you stay till the end of the video but Let's now give or video an idea just so we can select it with JavaScript Of course, we can select it with the class name, but let's just give it an idea of my video and let's Now save this go to js open the script file and Let's close the explorer so we can focus Now the first thing that I want to do is make sure that Or dom has loaded and then we can do the rest of the stuff. It's actually fairly easy to do this with JavaScript and there is Quite a few ways of doing I believe but let me show you a very easy way With an event listener. So what we can do is document Dot art event listener and this event listener will be called dumb dumb content loaded Just like this and this will be a function So inside and inside the curly bracket is where we'll be adding our code So now I want the video to play on user interaction. So when somebody Touches the iPad the video will start playing automatically and what I can do is actually Bind a touch start event listener on or document body. Let me show you how to do this. So document dot body And then we can add other event listener again And this time this time this event listener will be touch start This one here and and then we can trigger a function So the function let's just so the function can be called anything. So let's just group a key pair simple play video just like this and we now need to create this function. So let's create this function function play video And inside here is where we first of all need to select the video element So let's go back to index HTML and I'm going to be using this idea that we just created a few seconds ago And let's do document Actually, let's do const video equals document dot get element by ID And the ID is the one that I just copied my video Let's close this and now we need to check whether this video is playing So to do this is actually fairly simple. We can just do a simple if statement And we can do if video dot playing Then do nothing But else if the video is not playing Then make sure that we play the video and to do this we can do video Dot play just like this And save let's tidy this up a little bit because it's all over And just like this And if I save again, you will see that all the screens have reloaded The video is showing on the tablet and now if I interact with the tablet by teaching it You will see that the video starts playing. So it's not the end of the world. It's not ideal But it is the job. There is no other way And the last thing that I want to show you just before we go It has nothing to do with the video, but it's a little bit of Manipulating the colors, I guess What we can do is for example, if you wanted to Manipulate the video darkness or lightness depending off The color of your video We can put another layer on top and then just manipulate the opacity So we can make it darker lighter. So other elements stick out what I mean, but this is Is for example, if I was to let me copy My logo super quickly So if I was to add my logo and let me actually make my logo A little bit bigger than we did. So let's go to the styles And let's do Let's just do images and then width of 600 pixels might be okay And save this And let's actually centerline this so Fairly large on my phone. So maybe a little bit less than that, but you know, all right, that looks a little bit better 400 All right, that looks a little bit better now. So let me center this super quickly. So I'm just going to do on the body Let's do display flex and then align content center Justify content center and dash it center it but because the We only have an image technically inside the body. That's why the item is sorry. That's why the image is at the top So we're just gonna have to give this a height of 100 vh, which takes the 100 Which takes the full height of the screen So as you can see the logo is now in the middle, which is pretty cool And let me now show you the overlay super quickly. So what we can do in the html We can add another div with a class name of background overlay, maybe And then close div and now I can use this div to dim the actual video So to do this, let's add another star in here And we can do again position fixed Top zero, excuse me Top zero right zero left zero and bottom zero Then we can give it the background color. Obviously my video is quite dark. So we can just go with background color of black Just like this and then we can do opacity of 0.6 or whatever save this And as you can see this is working, but it's actually over my logo So what I want to do is change the settings again. So z index and maybe we can just do it as minus nine. So it's above the video But not above any other elements So let's take this and have a look as you can see now my logo is sticking out a little bit The video is looking pretty cool. All right And that's pretty much everything if I was to touch the screen again as you can see The video is now playing again on the tablet and that's Hopefully this might not be the case on the new tablets. I'm not too sure. Let me know in the comments below If you find this video useful Make sure that you smash the like button comment below if you have any questions Don't forget to subscribe to my channel as I am posting weekly videos just like this And as always, my name is rally and you watch my channel right at the brand and I will see you In the next one. Thank you very much for watching