css - react-player 响应与脉轮 UI

Question

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

我应用了这里推荐的 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;
}

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

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

在更大的屏幕上它会溢出。这个想法是让一切都保持在 100vh。