How to Set a Full Size Video Background in Rails with Bootstrap 4

That we have our image background in place in this guide, we are going to see what we need to do in order to have a dynamic video back here just to give a little nice little design kind of flavor. Switching in to the finder along with the show notes, I've given you access to the source code after I've finished filming and you will find these two video files. These are also open source videos. You definitely can choose to use your own. I would just make sure that they are around this size where they're under five megabytes and size URLs. You may have some latency issues with the video showing up. So switch into your app. As you can see, I have the finder open with the app right now. If you go into your assets directory, you can create a new directory here called the videos. And inside of this, simply take these two files, which if you drag them from the from the repo, then you can download them and have them right here. And that is all you need to do. Now, if I switch in to sublime text now go to the application layout file and we are going to get rid of our div. That was kind of our temporary div right here. And the only reason I have that and put it there was just to make room for this one and now we're going to use another helper. But instead of image helper, we're going to use one called a video tag helper. And the first argument that this takes in and I'm going to give us some room because I'm going to put a number of items inside of it. So the first argument that this takes, because video tag is just a method. The first one is the file name. So if you're wondering how you can get access to that, come into the finder and I'm going to use the MP for one you can use either. But that's going to be the one I'm going to use by default and inside of quotation marks. Simply type that in video tag because we said video, this is going to go into our assets directory and then it's going to look for the videos directory. If you do not name your directory videos, this will not be able to find it. So that's very important. So now that we have that person, the name and we're going to have a few more options. So first, we need to give the idea remember how we had the idea of background. We need this selector. So before we go on into anything else, let's come into Chrome and also make sure that the terminal going no, not since our let's get in. So running the terminal now or running the server now, if we come back, should be able to hit refresh and we should see a video. But it may or not actually be working for some reasons. I'm going to tell you in a second. So if I hit refresh, I'm mainly just wanting to make sure there are no errors and it's finding the videos properly and all that kind of good stuff. So if I hit refresh, that worked. Now, you may say it didn't work, but actually it did, because if you notice, the image changed slightly. And it's because now this is actually the video and I took a screenshot from the video to make the background image. And it's not plain, but that's because we need to update some settings. I just wanted to make sure we weren't having an issue where it wasn't finding that. But now that it has it, we can come here and and our settings. The first one is going to be auto play. We're going to set this one to true then loop to set it to true muted because there is an audio track we're going to set to true. And then we're also going to add a poster. Now the poster is more there just in case the video has a hard time loading or something like that. So I'm going to say home underscore big Panji. So this is simply this one file that right now or before this video we were using as the value for the image background. So now coming back to Chrome, you hit refresh. Now look at that. We have a full working video. Everything here is working. If I click about me, it still is going contact. It's going again. So what this is going to do, because we said we wanted this made available and looping and on auto play. Now, by default, this is going to automatically start playing right when the page loads it. Going to keep on plane until you leave for a different page and it's going to Mbewe and have all of those kind of features, if you want any different kind of behavior. Feel free to change it. Each one of these are options and you can use them however you want. Now, also notice, if you go to blog or if you go to portfolio, that it doesn't have this because we are only specifically targeting our main application file. So if I come back to home, you can see this is back and it's working and the video is only going to load right here. So excellent job. You now know and really saw how little amount of effort it took to get a very cool element like this in place. Know clear. And one other note before we end on this one. Part of the reason why this is possible is we only put in a few styles, but by having bootstrap there, that really helped. And even though we did a few little overrides, that's what helped make this possible in such a few is in such a few lines of code, you so they get status and now we can say get it. Integrated video background along with styles, get push, origin, image management. Everything is good here. We can now come to a pivotal tracker and if we come, we can say we implemented a video background on the homepage. Now I'm going to add another task. So this task is going to be to integrate video uploading components and this is going to be a big one. This is actually going to take more time than all the rest of these ones combined. And what we are going to do is you may have noticed, I'm sure you did, that all of our items for our portfolio are hardcoded. No, technically, we very easily could just add images inside our images directory and it would be no problem whatsoever. You could call them from each one of the portfolio items and you could have images. And if you choose to do that, that's perfectly fine. However, I would be doing you a disservice if I did not show you how to build an image, upload or directly into the app. So I will see you in the next guide and it's going to be a little bit different, kind of deep dive. Our first most of our deep dives have either been related to a specific topic and we went away and didn't even work on the app. This one's going to be working on the app. And additionally, we're going to break it into a few pieces because building an image uploader isn't really something that you would typically do in a single video. So it's probably going to take us a few to get through that. So I will see you in the next guide where we start giving our portfolio items the ability to have images that are uploaded.