Different Video background Desktop / Mobile?

Design help General
1

Hi there,

This project is about to finish and I’m now seeing a problem for the mobile version. In fact the video background is very large, this means that the happy guy is not visible on small screens. So I cropped the video and tried to replace the video “only” for the mobile version but it replaces also on the desktop version…

Any idea how to solve that inside webflow? Or do I need to add custom code?

Thanks!

Live: https://enginiumgroup.webflow.io/

https://preview.webflow.com/preview/enginiumgroup?utm_source=enginiumgroup&preview=658a129dc48ead4e6e83d6ccc6d4b2af

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hey @palombokevin

Not sure if you can replace the video using the same video bg element, but you can use a different bg element for mobile and just make it display none for desktop.

Piter :webflow_heart:

1 Like
3

Hi Piter,

I can’t see the option for the video background to apply only on mobile. I added a sub class name but don’t work either…

1 Like
4

You need to add a second video element and make it visible only on mobile. So the video element will have a class mobile-video and will be set to display none for desktop.

Piter :webflow_heart:

5

@PeterDimitrov thanks but it auto replace desktop video. It’s “background video” maybe is that the problem?

6

I’m talking about two video elements, not a combo class. I will record my screen and share a link here.

@palombokevin > https://www.useloom.com/share/cc52339ee9954d2d860b84a70defa6d2

1 Like
7

Hahaa…Thank you so much @PeterDimitrov. With the video it’s cristal clear :slight_smile:

Cheers!

1 Like
8

Great! Happy to help :webflow_heart:

1 Like
10

@PeterDimitrov really interested to watch that Loom video but it looks like it’s been discontinued. I know that tactic is what I need to do, but for some reason no matter what I do…the desktop video is the only one that is being shown on mobile/tablet, even though I have set desktop to display:none and set the mobile version of the video to display:flex.

Here’s my view-only link — https://preview.webflow.com/preview/differential-3c7dbf49e9e3ed5aaf5ae8f54d?utm_medium=preview_link&utm_source=designer&utm_content=differential-3c7dbf49e9e3ed5aaf5ae8f54d&preview=e1ac0bfb32661290b4c7271b0c0b94ea&mode=preview

There’s a div called “Video Container” with the two background videos in it. Eventually I’m going to be tying video progress to scroll position with custom code, but I can’t get the divs to show/display correctly. When inspecting the code at the published link — https://differential-3c7dbf49e9e3ed5aaf5ae8f54d.webflow.io/ — it almost looks like it’s being overridden somehow.

Any help would be much appreciated!

11

This is what I’m seeing when I inspect the published link on tablet breakpoint. Somehow my display:none is being overwritten. I have 0 custom code on this page. Honestly no clue what could be doing this…28%20PM