Streaming live at 10am (PST)

Background video responsiveness

#1

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.

Email link block not working on desktop
#2

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.

#3

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?

#4

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…

#5

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.

#6

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

#7

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.

#8

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?

#9

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.

#10

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.

#11

Hello,

Thanks so much. I finally understand. That fixed the issue!!! However, now I’m running into the issue of not being able to copy it and put it in my project. I had duplicated the project in my account and moved on while I was waiting for a resolution to this issue. I have since transferred the main project to the client (I have the login info.) I made the changes and then copied the entire section like I have done other times. I went to my clients account and try to paste it. If I try to using my mouse the paste command is grayed out. If I do Ctrl+V, I get an error message saying (please see photo below for error message). I have filled out and sent it but I’m not sure how long that will take. Any suggestions?

Thank you

Link where video section is sitting: https://preview.webflow.com/preview/umi-8210d6-f78ab2eb082a79-ee61ce2cb6f54?utm_source=umi-8210d6-f78ab2eb082a79-ee61ce2cb6f54&preview=638b8607cc74a35da1cae59144196aa1

Link to main project: https://preview.webflow.com/preview/umi-8210d6?utm_source=umi-8210d6&preview=c87027688bc8f52bde9e18c1d2dcf0da

#12

Alright!!! Happy to hear :smiley:

Transfer the project with the solution to the client, and then you will be able to have them both opened and copy paste between them.

#13

I know right. Thanks so much with that.

However, I have already transferred the project to the client and still I get the error message mentioned before. It will not allow me to paste.

#14

maybe you can do a video screen capture and re-create the error?

#15

Sure. See link below.

Video link: https://www.loom.com/share/9c83b564b4df4e638c0b799fb6f275b9

Link for project where video section is: https://preview.webflow.com/preview/umi-8210d6-f78ab2eb082a79-ee61ce2cb6f54?utm_source=umi-8210d6-f78ab2eb082a79-ee61ce2cb6f54&preview=638b8607cc74a35da1cae59144196aa1

Link for published website where I am trying to paste it into: https://preview.webflow.com/preview/umi-8210d6?utm_source=umi-8210d6&preview=c87027688bc8f52bde9e18c1d2dcf0da

Published site: www.unitedmembersinsurance.com