In this guide, we're going to implement a dynamic video background. In the show notes, I've given you access to the source code and you will find these two video files. These are also open source videos, you definitely can choose your own files if you'd like. I would make sure that they are under five megabytes in size or else you may have some latency issues with the video showing up.

Switch into your app, I have the finder open with the app right now. If you go into your assets directory you can create a new directory called videos, you can download them and drag them into the directory.

If I switch into sublime text, now go to the application layout file and we are going to get rid of our div. We're going to use another helper. We're going to use one called a video tag helper. I'm going to give us some room because I'm going to put a number of items inside of it. The first argument that this takes is the file name. If you're wondering how you can get access to that, come into the finder and I'm going to use the mp4, you can use either one. Inside of quotation marks simply type that and video tag, since 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. Now that we have that, pass the name, We're going to have a few more options, we need to give the ID. Remember how we had the ID of background we need the selector.

let's come into Chrome, 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. 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 of that kind of good stuff) that worked. You may say it didn't work, however, actually it did. Notice the image changed slightly, this is actually the video, I took a screenshot from the video to make the background image.

We can come here and add our settings. The first one is going to be autoplay. We're going to set this one to true, then loo, set it to true. Muted, because there is an audio track we're going to set to true. We're also going to add a poster, poster is there in case the video has a hard time loading or something like that. I'm going to say home_bg.png.

Coming back to Chrome, hit refresh, now we have a fully working video. Everything here is working on the about me and contact pages. We said we wanted this made available, looping and on autoplay. By default this is going to automatically start playing right when the page loads, it's going to keep playing until you leave for a different page. If you want any different kind of behavior, feel free to change it.

Notice if you go to portfolio that it doesn't have this, we're only specifically targeting our main application files.

• git status
• git add .
• git commit -m "Integrated video background along with styles"
• git push origin image-management

We can now come to pivotal tracker and say we implemented a video background on the home page. I'm going to add another task, which is "integrate video uploading components." We will be implementing an image uploader in the next few guides.

I will see you in the next guide where we start giving our portfolio items the ability to have images that are uploaded.

Resources

• Source Code