react-player responsive with chakra UI

Question

im trying to make a full response window, which contains a rows. Above a video playing and at the bottom, some controls.

i applied the css recommended here for a full responsive keeping aspect ratio https://www.npmjs.com/package/react-player

This is the screen code:

<Flex color="white" direction="column">
    <Flex justifyContent="center" flex="5">
      <Box pos="relative" h="100%" w="100%">
        <Player url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
      </Box>
    </Flex>
    <Flex
      justifyContent="space-around"
      alignItems="center"
      flex="1"
      padding="2vmax"
    >
      <IconButton
        aria-label="Search database"
        icon={<GrVolume color="black" size="2vmax" />}
      />
      <IconButton
        aria-label="Search database"
        icon={<GiExitDoor color="black" size="2vmax" />}
      />
    </Flex>
  </Flex>

and this is the Player component

const Player: FC<PlayerType> = ({ url }) => (
  <div className="player-wrapper">
    <ReactPlayer
      url={url}
      className="react-player"
      playing
      width="100%"
      height="100%"
      config={{
        youtube: {
          playerVars: {
            rel: 0,
            showinfo: 0,
            modestbranding: 1,
            fs: 0,
            disablekb: 1,
            host: "http://www.youtube.com",
          },
        },
      }}
    />
  </div>
);

this is the extra css applied:

.player-wrapper {
  position: relative;
  padding-top: 56.25%;
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

I tried by wrapping everything with chakra aspect-ratio component, but this is the closest escenario for a responsive thing that i found, and its bad lol.

This is also affecting Flex somehow since flex=5 is not being applied i guess

on bigger screens it overflows. The idea is to keep everything whitin 100vh.