Video Background in Mobile

Questions
1

I have a video background on my landing page which works great except on mobile and tablets. The landing page is set up to be responsive and I’m able to get the video to run if I load the preview in my browser and adjust the width to mobile and tablet width. I checked with Chrome and Safari on iPhone and iPad.

Does the video background work in mobile?

2

I can also say that I reviewed the documentation but couldn’t find anything about this. Does the video background work in mobile or do I need to re-design my landing page somehow? Thanks everyone. I appreciate your knowledge and feedback.

3

Check this out

4

The issue with this is that there are no controls to Center, stretch or do anything else with the fallback. Considering the varying screen sizes on mobile, this is quite frustrating.

5

Hello all, sorry to bump this older thread but curious if the situation is still the same? I’d like to have a partial video background on desktop but if I’m unable to do so on mobile, would like to have control over the fallback. Thanks in advance

1 Like
6

Hello,
I’m surprise it’s not yet possible to put video background on mobile… even in wordpress it’s possible.

8

For all of you who are waiting for a simple and faster loading solution. Try this. I am not a developer, but 20 minutes of stackoverflow research gave me this. Just add it as an HTML element. Works like a charm and scales from wide screen to mobile.

<video style="
position: absolute;
left: 50%;
transform:translateX(-50%);
bottom: 0;
min-width: 100%;
min-height: 100%;
class=“video-js”
playsinline autoplay loop muted
<source src="YOURVIDEOURL" type="video/mp4"/>
</video>
4 Likes
9

it worked great! thanks

1 Like
10

There was a missing quotation mark in the code above for me.

This is what I used

<video style="
position: absolute;
left: 50%;
transform:translateX(-50%);
bottom: 0;
min-width: 100%;
min-height: 100%;"
class=“video-js”
playsinline autoplay loop muted
source src="VIDEO-URL-HERE" type="video/mp4"/>
</video>
1 Like
11

sorry i dont get it? the link is just a link to bubble manual?

trying to get the video background to show up on both desktop and mobile

12

The Bubble Manual has been updated since then. It now just says this:

IMG_1681
IMG_16811179×2556 250 KB

So maybe try the code instead in the above posts. :blush:

1 Like