根据屏幕宽度和缩放调整 HTML 视频标签大小

Question

该网站（用 React 编写，使用 Typescript 和 Tailwind）有一个用户可以用来观看视频的组件（该组件是使用 HTML Video 标签编写的）。视频下方还有各种下拉菜单和按钮。但我们将讨论 HTML 视频。

该页面的结构可以示意性表示如下

FirstPageContent.tsx

<div className="container m-auto flex h-full max-w-[600px] flex-col">
    <div className="flex">
      <VideoComponent />
    </div>

    <div className="flex">
      <DropdownComponents />
    </div>

    <div className="flex">
      <Buttons/>
    </div>
</div>

视频组件.tsx

  <div className="relative h-full w-full">
    <video
      ref={videoRef}
      className="w-full"
    />
  </div>

目前，我使用左侧和右侧的填充来调整 HTML 视频的大小。但据我了解，这绝对不是一个通用的方法。下面是示例代码

主.css

@media screen and (max-width:812px) {
  .container{ padding-right:90px; padding-left:90px;}
}
@media screen and (max-width:750px) {
  .container{ padding-right:75px; padding-left:75px;}
}
@media screen and (max-width:700px) {
  .container{ padding-right:60px; padding-left:60px;}
}
@media screen and (max-width:650px) {
  .container{ padding-right:45px; padding-left:45px;}
}
@media screen and (max-width:600px) {
  .container{ padding-right:30px; padding-left:30px;}
}

我只提供了一个代码片段，正如你所知，还有更多的条件。所以我的问题是：我可以根据屏幕宽度/高度和缩放来调整 HTML 视频大小吗？在这种情况下，YouTube 就是一个很好的例子。

Answer 1

您可以使用不同的单位，例如

%

或

vw

来代替

px

，视频元素的大小将根据屏幕尺寸而变化。

video {
    width:80vw;
}

另一种解决方案是获取屏幕的高度和宽度，并通过 Javascript 根据屏幕尺寸更改视频元素尺寸，但我认为这不是正确的方法