React-Player video responsive to phone screen

Question

I want to have a video background that covers the full website but with an aspect ratio of 9:16, my video doesn't fit well on some screens, see image attached:

I've seen multiple questions but none of the answers worked for me. I paste here some of the code:

return (
      <>
        <ReactPlayer
          style={{
            display: seeVideo,
          }}
          className={styles.video}
          url={videosrc}
          playing={true}
          controls={false}
          light={false}
          pip={true}
          muted={true}
          loop={true}
          onLoadedData={() => {
            setLoading(false);
            setSeeVideo('block');
            setSeeLoadingFrame('none');
          }}
        />
    </>
);

And the CSS code:

.Video_video__AXELc {
    object-fit: cover;
    width: auto !important;
    height: -webkit-fill-available !important;
    z-index: -1
    transform: translate3d(0px, 0%, 0px);
}

And this video is encapsulated in another <div> with this CSS code:

.Landing_left__t2dm2 {
    display: flex;
    justify-content: center;
    width: 100%;
    height: unset;
}

Just to clarify, I don't want a video as a background in my whole website, I want a background video in this first section of my website which is going to fill the full width and height of the phone screen, let me show you a screenshot of the HTML:

So the video should be displayed as a background in section landing, but not on waitlist <div>. I can also share the CSS code for this landing section:

.Landing_landing__Zl8P7 {
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
}

Do you have any idea?? Thank you!!!!