Background video on mobile

Hi all

I’m trying to create a background video on my landing page with this code:

<video autoplay muted loop playsinline style="height: 100vh; width: 100%; z-index: -1; object-fit: cover; ">
  <source src="vide-url" type="video/mp4">

this works on desktop, but does not work on mobile (safari).
it works a few times on Chrome…but after a few refreshes it doesn’t show the video anymore.

video is only 4.3mb so that shouldnt be the issue…
any solutions??

Maybe try using the built in function in Bubble for backgrounds to be of type video.

Screen Shot 2024-04-03 at 5.29.00 PM