Hi, in this video, I'm just going to show you how you can add a background video to what was on your website.

A good place to add a background video is in the top of the homepage here, which we're looking at now. It's called the Hero section of the website. Currently, we've got an image, which looks quite nice, but maybe you'd like to add a background video. So how you do that is when you logged into the website, you'll see the admin toolbar at the top here, this black bar, and you'll see a link that says, edit with frontend to page builder. So if you click that, that will open up the frontend page builder.

And that's a really easy way to edit your website pages. It takes a second or two to load up. So we've got other videos on how to edit your rows and columns, so you can look at those. But this video is just going to show you how to add the video. Click the row, a little arrow thing and click the little pencil icon to edit the row.

And this opens up the row settings here. And click the background tab, and you can see the row background image here.
​
And we're going to delete that. And we're going to toggle this background video to on. And we're going to go down to MP4 file, and we're going to click Add Media file. And I've already uploaded a video earlier, and we're going to select that, and we're going to Save Changes, and we're going to close that. We're going to update this. It says successfully updated, and we're going to close out of this. There's the background video.

Now, one thing you might've noticed is it takes a second for the video to load, which is okay, but it's not great. Ideally, the video would load instantly. However, depending on the bandwidth or speed of the person's internet connection, it's not always possible to load a video instantly. Here. There's a way around that. What you do is you need to take a screenshot of the first frame of the video and then upload that as a preview image.

The experience of the user is that the video loads instantly because the first second when the video is loading, they'll be looking at the first frame of the video as a JPEG image. And so it looks like the video loads instantly.
​
So how you do that is again, go to Edit with the front-end page builder, wait for that to load up. And then we're going to go into the row settings like we did before. The background tab, and we can see the video file there. We're going to scroll past that and go to here where it says video preview image, and we're going to add an image. And I've already uploaded the first frame of that video here.

I'm going to add that image as a jpeg, and I'm going to set that image. Also, I'm going to add it as a background image here. Click, Set Image. I'm going to set the position of that background image as center-to-center.

That's important because it means that if the image is centre-to-centre, it means the image is positioned in the centre-centre of the field of view, which means that when the video loads, the video and the image are in the same are positioned in the same place so that there's no jumping around so that the preview image is the same as the video when it plays. And then I'm just going to save that. I'm going to close that, and we're going to update.
​
I'm going to close out of that. Now we can see the video. There's no blank space. If we refresh the page. See, there's no blank area. It looks like the video plays instantly. That's the best way of uploading a video and having that as a background video.

Upload the video and then use the first frame of the video as a preview image and also set that as the background image as well.

Then that means that your background video looks like it plays instantly.

Anyway, thanks for watching.