Streaming live at 10am (PST)

Different Video background Desktop / Mobile?

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

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

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

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:

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

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

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

Cheers!

1 Like

Great! Happy to help :webflow_heart:

1 Like

@PiterDimitrov 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!

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