Streaming live at 10am (PST)

Background video responsiveness

Hello,

Hoping that someone can help. I am having this issue with responsiveness and layout on the Products Page.

I want a video to play in the background but from what I understand it doesn’t work on mobile. So I have a still image as the background for the section. I then placed the video on top and I turned off the visibility for mobile so that only the image and not the video is seen on these devices.

It looks fine in desktop but the on tablet & horizontal mobile modes the second section disappears. In the mobile version Section disappears entirely.

Thank you


Here is my site Read-Only: https://preview.webflow.com/preview/umi-8210d6-f78ab2eb082a79cc1758d539a673?utm_source=umi-8210d6-f78ab2eb082a79cc1758d539a673&preview=74f71326460e509ac4ecbde98c46c8d7

Here is a link to the video showing the issue.

Hello Kat,

I think that if you change your hierarchy/structure, it will be easier to manipulate the video element.
Don’t place all the elements inside the Background Video element, instead, place them in a sibling div so when you hide/unhide the background video, it does not affect the other elements in the section.

I did that and it is still not working. Now my interaction on the K stopped working. It was working fine and now it seems like it zeroed out the values I had set. When I try to set the new values, they do not work.

Any ideas?

The change you did to the video is the 1st step. Now it is possible to hide it without affecting the other elements. The 2nd step you should do is to make sure all the elements behave as you want them to.
The 100vh section does not have 100vh height…

I changed the 100vh section after naming it that in hopes of fixing it but it didn’t work. Even if you set it back to 100vh it doesn’t work.

Naming a section 100vh , won’t give it that property… You need to set the height, as I did in the screencast.

I am aware. What I name a section doesn’t matter. Please ignore what I named sections. What is important are the settings. Whether the settings for that section are set to auto or to 100vh, it doesn’t matter, I’m still having the same problem.

I am not sure you understand me or that I understand you :confused:

Is this the problem:

The section that has the class ‘FlexVerticalSection’ is not visible on mobile. Right?

The problem is with the section name 100vh.

Let me restate the issue.

When you look at the desktop version, Section 100vh has an image (name riskman.jpg) as its background. On top of that there is a video (legworkBgVideo). Visibility is turned on for both. There are not problems with this until I get to the mobile horizontal view in the designer. In the mobile horizontal view, I have the visibility of the video turned off so that the background image for the section shows with no video. However, the background image can only be seen when the designer is set to its max width of 767px. Whenever you resize to 480 (the smallest width), the image disappears and is no longer visible only the text “Don’t risk it” that sits on top is visible. In the mobile vertical view, the image is not seen at all; not at 479 px or 240 px.

Ok, so I did understand your problem, and I did give you the solution.

The image is set as background image for the section 100vh FlexVertical. This section is set to have relative position and 100vh height at the desktop view. When you go to tablet view and smaller screens, you change the properties of this section. You remove it’s height, and you change position to static. These changes makes the section height become 0.

If you want the video & images in this section to be visible - you have to give some elements inside the section height, or give the section itself height or relative position.

7 posts were split to a new topic: Can not Copy between 2 projects