▼
Streaming live at 10am (PST)

Quick question about background videos

#1

Hello,
I did some looking on the forums, but I was unable to find the answer I am looking for. I want to create a hero spot that has a background video and a transparent png logo on top of it. That I can do no problem, but I was wondering how to change it for mobile. Right now the best I can figure is that the background video changes to a still from the video on tablet and mobile.

I understand the reasoning behind this, but I do not like the still that is chosen for the background. Is there a preferred or best practice to being able to swap the background video on mobile with a specific image?

Does that make sense?

Here is my public share link: LINK
(how to access public share link)

#2

Total sense. The video bg widget in Webflow is great and straight forward but could propose more customization. Like the choice of the POSTER image (img displayed w/ video can't be served) and other details.

So you have various method to propose the UX you want on mobile.

  1. use a custom code to make a video g instead of webflows' widget. You'll get mor control but also you'll have to produce the various formats of video needed, and host them. You'll also produce your poster images and host it the same way. Search on Google or this forum for adequate HTML5 video bg code.
  2. hide the section alltogether for mobile devices (settings tab) and create a section only for mobile, with what you want inside, and hide it for desktop
  3. add a jpeg over the video bg, that you will only show for mobile, it will hide the one you don't want to see.
#5

Thanks Vincent! I just found the solution I was looking for. So crazy simple. Just add a background image to the video on the mobile breakpoints. Ugh. I don't know why I didn't think of that in the first place!

#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.