Adjust HTML Video tag size depending on screen width and zoom

Question

The site (written in React, using Typescript and Tailwind) has a component with which the user can view a video (this component is written using the HTML Video tag). And also under the video there are various dropdowns and buttons. But we will talk about HTML Video.

The structure of this page can be schematically represented as follows

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>

VideoComponent.tsx

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

At the moment, I adjust the size of HTML Video using paddings on the left and right. But as I understand it, this is absolutely not a universal method. Sample code below

main.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;}
}

I provided only a code fragment, as you understand there are many more conditions. So my question is this: can I adjust the HTML Video size based on screen width/height and zoom. In this case, YouTube is a good example.

Answer 1

You can use different units such as % or vw instead of px and the size of video element will change according to the screen size.

video {
    width:80vw;
}

Another solution would be to get the height and width of the screen and change the video element size according to the screen size via Javascript but I don't think it is the right approach