Are there background video best practices?

Need help Responsiveness
1

Hi Bubble team,

Are there best practices for background video uploads?

I am working on a landing page that works really well in new Chrome, the video autoplays and loops properly.

However in Safari, and an older version of Chrome I tested it on, it usually sits on a black screen and doesn’t start playing.

It is an mp4 and under 50mb…but are there any other best practices you’re aware of that would increase the number of browser types the background video would play on?

Thank you!

1 Like
2

@jakem1331 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. You can check the live version here: https://www2.myne-homes.de/

<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>

NOTE: If you want a paralax effect you change the attribute “absolute” to “fixed”

1 Like
3

hello!
Can’t make it work… seems missing a " for the style no?