Streaming live at 10am (PST)

How does Pepsi have a video background on mobile?


#1

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

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.


#3

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

So I looked around on Google and found a simple script that simulates this, assuming you also want a BG video on mobile: https://stackoverflow.com/questions/9260501/html5-video-background-on-ipad-iphone

On an unrelated note… who at Pepsi thought Pepsi Fire was a good idea? :nauseated_face: :stuck_out_tongue:

Best,
Christopher


#4

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