1 year ago

#295598

test-img

Shaneeyb

How to get my text to display over video (React)

I'm trying to add Text over a video that takes up 100 vh/vw, and it's about halfway down my page. I can't seem to find a good way to use Inline Styles to put the text over the video.

I tried top: "0" but that just brings it to the top of the entire webpage, not the top of the div that it's in.

Does anyone have any tips? Here is my code!

function About() {
  return (
    <div>
      <div
        className="parallaxImg"
        style={{
          backgroundAttachment: "fixed",
          backgroundImage: "url(" + Beach + ")",
          display: "flex",
          objectFit: "cover",
          justifyContent: "center",
          alignItems: "center",
          width: "100%",
          height: "30vh",
          zIndex: "1",
          opacity: "80%",
          backgroundRepeat: "no-repeat",
        }}
      >
        <div class="center">
          <h1
            style={{
              opacity: "100%",
              color: "white",
            }}
          >
            About{" "}
          </h1>
        </div>
      </div>

      <br/>
      
//The video starts here. Above was just a parallax header thing.

      <div>
          <video
            loop
            autoPlay
            muted
            id="video"
            style={{
              height: "100vh",
              width: "100vw",
              objectFit: "cover",
              position: "relative",
              pointerEvents: "none",
            }}
          >
            <source src={Video} type="video/mp4" />
          </video>
          <div
            style={{
              color: "green",
              position: "absolute",
              textAlign: "center",
              alignItems: "center",
              justifyContent: "center",
              
            }}
          >
            <p>
              Aloha, I’m a front-end developer located on the island of Oahu, Hawaii. I have a serious passion for technology and learning all the things to make technology work for me.
            </p>
            <p>
              When i’m not tinkering with the latest gadget, you can find me surfing Hawaii's waves, on a beach volleyball court or vacationing at a ski resort breaking another collar bone.
            </p>
            <p>
              Other than sports and technology, I am very much a family person and faith oriented. Both keep me grounded and make me want to be the best version of myself.
            </p>
            <p>
              Overall, im trying to meet like-minded people who can mentor me to make me a stronger Web Developer, a smarter employee and a more wholesome and selfless person in general.
            </p>
          </div>
      </div>
    </div>
  );

Here is a screen shot of what I'm seeing.(had to crop out most of the picture because it was too big of a file) Screenshot of the lower half of the video and the next section.

Here is my Github if it helps.

https://github.com/Shaneeyb/Portfolio-Project-3

reactjs

video

text

overlay

inline-styles

0 Answers

Your Answer

Accepted video resources