Fixed video and scrolling text content!

Design help General
1

Hi, guys!
How are you?

285/5000

Could you please help me understand how I can make the scrolling content and video background stay fixed on the screen - responsive?

I would also love to add the opacity of the video to 70% and keep the text at 100%. I do this and both get 70%. :frowning:

Thank you very much.
:wink:

Preview link: Webflow - FF19

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

2

At the moment background video is not an easy task to do in Webflow. I would recommend using a background video on mobile instead of video.

3

What about scrolling text? How it works?

4

Here’s how I would do it:

  1. Create a section in webflow and make its position relative
  2. Create a div and define its size according to the video you want. Place that video inside that div, and make adjustments as you wish to the video, such as auto-play, looping and etc.
    a) In the position tab, make it as absolute-fullscreen and give it a Z-Index of 2
  3. Create another div with the same size and give it a black background with 70% opacity.
    a) In the position tab, make it as absolute-fullscreen and give it a Z-Index of 3
  4. Create another Div, place your text inside it.
    a) Set its position to relative and give it a Z-Index of 4.

That should do the trick. I hope I’m not missing on anything here.

Let me know if it works

1 Like
5

I tried but I think I’m incapable. hahah
The background now does not stay fixed. :frowning:

6

I’ll try it tomorrow on my own and let you know on how I did it.