Home > Software design >  How to make background video (or any element) ignore scrolling in React JS?
How to make background video (or any element) ignore scrolling in React JS?

Time:01-15

As the title says, im trying to make my background video ignore any kind of scrolling.

<video autoPlay loop muted
        style={{
            position:"absolute",
            width:"100%",
            left: "50%",
            top: "50%",
            height: "100%",
            objectFit:"cover",
            transform:"translate(-50%, -50%)",
            zIndex:"-1",
            overflow:"hidden",
        }}
        >
            <source src={Backvid} type="video/mp4"/>
        </video>

It's within a div with the rest of the elements, so I'm trying to make it stationary while I'm scrolling the elements in front of it. Example of the video being used

CodePudding user response:

I'm assuming the video element is a direct child of the body?

Try position: fixed

position: absolute is still relative to the parent. So when you scroll, the body moves thus will your video.

  •  Tags:  
  • Related