On the mobile phone, how to fill the height of the square?

[Jairwin-L]

html

<div
    className={css.playerWrapper}
  >
    <Vimeo
      video={item.cover_video_url}
      className={css.videoPlayer}
      muted
      loop
      background
      controls={false}
    />
  </div>

css

.playerWrapper {
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
   @media only screen and (min-width: 768px) {
      padding-bottom: 56.25%;
    }
    .videoPlayer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }

Hope it can fill the whole height