react-player 响应 chakra UI

如何解决react-player 响应 chakra UI

我正在尝试制作一个完整的响应窗口，其中包含一行。在播放视频的上方和底部，一些控件。

我应用了此处推荐的 css 以获得完整的响应保持纵横比 https://www.npmjs.com/package/react-player

这是屏幕代码：

<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>

这是播放器组件

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>
);

这是应用的额外css：

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

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

我尝试用 chakra 长宽比组件包装所有内容，但这是我发现的响应式事物最接近的场景，而且它很糟糕，哈哈。

这也会以某种方式影响 Flex，因为我猜没有应用 flex=5

在更大的屏幕上它会溢出。这个想法是让所有东西都保持在 100vh。