CODEWITHSUNDEEP
reactjs
Linir
Linir

Reputation: 388

React.js background video not centered

I am building a website with a background video component such as: 

    <div className={parallaxClasses}>
      <video className={classes.videobg} autoPlay loop muted>
        <source src={videourl} type='video/mp4' />
          Your browser does not support the video tag
      </video>
    </div>

It is working properly on full screen mode, but whenever I open the website on a smaller monitor, specifically phone-like, the background video is not centered, and I only get the left side of the video (instead of middle as expected). Here is my style:

  parallax: {
    height: "100vh",
    maxHeight: "1600px",
    overflow: "hidden",
    position: "relative",
    backgroundPosition: "50%",
    backgroundSize: "cover",
    margin: "0",
    padding: "0",
    border: "0",
    display: "flex",
    alignItems: "center"
  },
  videobg: {
    width: "100vw",
    minWidth: "1300px",
    position: "fixed",
  },

Where parallax is the container.

TL;DR

I am trying to center the background video when I watch website on smaller monitors, instead of having it offset to the right.

Thank you!

Upvotes: 0

Views: 942

Answers (1)

gdh
gdh

Reputation: 13702

You need to use media queries and adjust your styling according to the screen width. In your case, for smaller screens position the video to center and provide a width of 100%.

For ex: if you are using material ui, you can do something like this:

...
videobg: {
    width: "100vw",
    minWidth: "1300px",
    position: "fixed",
    ["@media (maxWidth: 600px)"]: {
      width: "100%",
      alignSelf: "center"
    }
  }
...

Based on the library you are using for your styles, the syntax differ. So check the usage of @media-queries in your library documentation.

Upvotes: 1

Related Questions