How does Pepsi have a video background on mobile?

I came across the www.pepsi.com website on my iPhone, and noticed that a video background loads perfectly on mobile, and the site isn’t even huge. I was under the impression that video backgrounds were not supported by mobile browsers.

I notice their source code is made up almost entirely of javascript. Does anyone have any insight on how this could have been done?

Just curious!

2 Likes

I am not sure what you are talking about because the link does not properly display on android mobile devices, so it may be difficult for anyone to give you any help. I suppose you could convert a short video to a gif since it will run on any device.

Dug into inspect element a bit and it appears Pepsi is using a few custom scripts to accomplish background video on mobile. See here:

Here’s a guide for getting this to work in Webflow: Make Webflow’s Background Video PLAY on iOS and Android affiliate

Best,
Christopher

This topic was automatically closed after 60 days. New replies are no longer allowed.