Can't make an MP4 movie height to change and fit in Material Box both landscape and portait

I learn JavaScript React and now I have problem with positioning of an MP4 movie.
I have a Codesandbox
I want it to fit the material Box in portrait with let's say height: '20vw and landscape but whatever I try I can't get it to change I must have missed some fundamental please advice

Like this, here the movie should be just a 4th of the height and not this mega high. Whatever I try this height can't be reduced please advice?

I have this scss in (item-renderer.scss) that is overridden by something I think

.pg-viewer-wrapper {
  height: 100%;
  display: flex;
  flex-direction: row;
  border: "1px solid blue";

  .pg-viewer {
    height: 100%;
    position: relative;
    flex-grow: 2;
    background-color: white;
  }
}

.pg-viewer-wrapper-mp4 {
  position: relative;
  padding-bottom: 5px;
  padding-top: 5px;
  width: 100%;
  border: "1px solid blue";

  .pg-viewer-mp4 {
    height : 50%;
    position: relative;
    object-fit: contain;
  }
}

from Can't make an MP4 movie height to change and fit in Material Box both landscape and portait