How To Add a Video or Animated Background

We recommend using gif instead of video for your background. Here's how to do it.

Video

Why Use a GIF?

GIFs (Graphics Interchange Format) and videos are both popular choices for background media, but there are several reasons why a GIF might be a better option in certain situations.

One advantage of GIFs is their smaller file size, which makes them faster to load and less likely to cause lag or buffering issues. They also don't require sound and can be set to loop seamlessly, making them ideal for subtle, repeating animations.

Another advantage is that GIFs are supported by most web browsers and social media platforms, so they can be easily shared and viewed by a wide audience. They are also easy to create, with many tools available that allow you to convert short video clips into GIFs.

In comparison, videos tend to have much larger file sizes, making them slower to load and more demanding on a device's resources. They also require sound and can be more disruptive to a user's experience if they are set to play automatically.

So, while videos can offer more complex and dynamic visuals, GIFs can be a more practical and user-friendly choice for certain background applications.

Transcript

0:01 Hey guys. So if you wanted to use a video background on your website and or funnel there is a couple of ways to achieve it with some custom code, but we don't recommend it at all because it will hinder the performance of your website obvi, because obviously it's a, it's a video file that's loading in the background and thus could obviously hurt your performance and ultimately your conversion.

0:27 So what we instead recommend is downloading a video, let's say for instance, on it's on YouTube or any other platform, and then converting the specific parts or sections into a gif.

0:39 And from there, you upload it as a background. So yeah, just a little cool tip. Let's say for instance, it is a a YouTube video that you want to download.

0:50 All you have to do is just go to YouTube and then type pp sounds weird, but yeah, it basically renders it to a service where you can very quickly download it.

0:59 And there's a bunch of these tools out there. And obviously like obviously if it is your video, others, so otherwise it might be copyright.

1:08 So yeah, like if your success, once you, once you've got that and you have converted it to a gift, there's a bunch of tools online that allows you to convert a video to a gif and then from there it's super straightforward.

1:19 All you want to do is, is select on the main container of where you want this background to be. Okay.

1:26 So in this case, we're gonna do it with this background selected. Okay, I'm just gonna reselect it so you guys can see.

1:34 You wanna go to BG image, and from there we are gonna choose, sorry, it was the wrong button there. And boom, there it is.

1:47 From here, you can like specify if you wanted parallax, or if you wanted if you want to leverage any of the attributes of either isolating it as full center full, a hundred percent worth, et cetera, et cetera, et cetera.

2:04 Now, obviously in terms of the design of the gift there, with the tools that you get out there, you can set the speed of it, you can set all the attributes that you want your, your gift to have.

2:16 And we also highly recommend that you use a a a a service that will give you an optimized give without hindering the quality of the image.

2:25 And there's thousands of these tools online. I think you can even do it with Canva which is a really, really great tool, highly recommended.

2:33 So yeah, guys, so just wanted to make a video in this specific regard, but obviously it is possible to do it via via video, but it does require rendering a custom script via JavaScript and a little bit of custom css.

2:48 But we don't recommend doing that after, you know, we've built hundreds of websites and we really don't recommend it. But obviously, if you wanted to go that route, you would you, you would need to hire a developer To quickly help you set up a script.

3:01 And it, it's not a complicated script, but we don't recommend it at all. Maybe reach out to us if it's really super urgent and we can maybe point you into the right direction.

3:09 Cool, guys, I hope the, I hope the video clarified in terms of how to add a, a animated background to your website and or funnel.