I currently have a hero video banner component I am building out. The hero video banner has been given a height of 100vh. On top of the hero video banner, I am placing an image overlay. I am noticing that on screen sizes with less height, the image overlay seems to get cut off. See the attached screenshot to see what I am referring to.

As you can see the lower half of the image overlay gets completely cut off. I am wondering if there is a way to ensure the image overlay no longer gets cut off on these screen sizes with less height I suspect the use of 100vh might be the issue here. Below is the code being used:

video component:

const VideoBanner = (props: IVideoBAannerProps) => {
  return (
    <div className={css.videoContainer}>
      <video playsInline autoPlay muted loop>
        <source src={props?.video} type='video/mp4' />
      </video>
      <div className={css.overlay}>
        <img className={css.img} src={props?.overlayImg} />
      </div>
    </div>
  )
}

export default VideoBanner

Video Banner Styles:

.videoContainer {
  video {
    position: relative;
    width: 100%;
    object-fit: cover;
    height: calc(100vh - 134.5px);
    display: block;
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(39, 39, 39, 0.5);
  }

  .img {
    position: absolute;
    top: 35%;
    left: 4%;
  }
}

@media screen and (max-width: 1199px) {
  .videoContainer {
    .img {
      position: absolute;
      top: 45%;
      left: 4%;
    }
  }
}

@media screen and (max-width: 1199px) {
  .videoContainer {
    video {
      height: calc(100vh - 125px);
    }
  }
}

@media screen and (max-width: 767px) {
  .videoContainer {
    .img {
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
    }
  }
}