Moving video as a background

lycheebubble · 2024-10-25T06:30:16.049Z

Hiya, lots of threads on this but no response/ none of them have really been solved. I get that i can have a video playing in the background (full width/height of page) and it shows fine on desktop, jsut not on mobile. nothing loads on mobile and i dont see the video. fyi the video is uploaded to bubble database.

vvaleravella · 2024-10-25T20:39:13.987Z

Some mobile browsers restrict autoplay for videos, especially if they have sound. Is the video in MP4 format? To improve performance on mobile and if it’s only one video, consider creating a separate video element specifically for mobile, using a smaller, optimized version of the video.

senecadatabase · 2024-10-26T00:14:59.861Z

Well, one way you can easily solve this without spending forever…and I’ve done it in the past, although not on Bubble. But, I did test it with bubble using the image below and it worked fine.

I don’t know what your background video is. But, a background video should only be seconds long and loop.

So, you can easily convert your mp4 into an animated webp and it will play on any device.

Plus, the file size should be smaller.

I have used this method for both desktop and mobile in the past. There’s no code required and it’s quick.

I don’t know what tools you use, but ezgif is out there you can try. You can test it and see what kind of quality you get. Of course, there are professional tools if you have access to them.

Also, whatever method you use and you want a professional look…

you should test using a thumbnail that loads and shows until the video or animated webp starts showing.

I just tested using animated webp on bubble with this image for a background:

Ribs

It’s an idea you can experiment with and see how it works for you. I experiment with a lot things when it comes to Bubble

Of course, I’m sure you know bubble isn’t always the fastest loading. You can test though.

lycheebubble · 2024-10-28T05:56:18.849Z

thanks, it is mp4 and i have compressed it. what do you mean by create a separate video element for mobile?

lycheebubble · 2024-10-28T05:57:53.636Z

thanks super helpful! I have used EZGIF but the quality was really bad Is there a particular website you recommend for converting mp4 into animated webp?