Video background on mobile devices

[jhayles]

Hi. Video backgrounds on mobile used to not be possible, but I’ve seen two websites that are doing this now. Can you tell me how to accomplish this? Please check the example website below with your phone:

www.shop.alltrails.com

[marc_a]

Hi @jhayles,

Thanks for reaching out.

To have a background video on your mobile devices or even on the desktop view, just add the video src in your section if you want to have a fullwidth background video.

Hope that helps.

Thank you.

[jhayles]

And this will play in the background on mobile devices, as long as the phone supports it?

[marc_a]

Hi @jhayles,

Yes, the video will play in the background on mobile devices, as long as the phone support the videos.

Hope that helps.

Thank you.

[jhayles]

Great! Lastly, while I have you here, how do I make a “Classic Text-Type” element a white font instead of black? There aren’t any controls for the font color there, so I’m assuming it’s custom code?

[marc_a]

Hi @jhayles,

To change the Classic Text Type from black to white, just add color:#ffffff; in the style field.

Hope that helps.

Thank you.

[jhayles]

Great! Thanks. And is there a reason why the text isn’t being responsive on mobile? See attached screenshot…it’s keeping the text large, and out of context with the screen.

[prakash_s]

Hi @jhayles,

Add font size after the color at the style field color:#ffffff; font-size:5vw

And add the font size in VW (viewport’s width). The font size will adjust to all views.

Thanks

[USAT009]

And how do we prevent the video from loading on mobile? as it wasn’t supposed to be visible on mobile and then at some point it changed to being visible, which is attractive, but slow on 3G. It use to load the billboard image.

[ruenel]

Hello Jesse,

Please insert a poster image so that when the video is not playing in a slower connection, the poster image will display as a replacement.

By the way, please make sure that you have inserted an absolute path to your video. You are not allowed to insert a video from Youtube or any other video link. It must be a direct video src https://example.com/video.mp4.

Please send us the URL of you page so we can check it out. Thanks.