Within the site (developed with React, utilizing Typescript and Tailwind), there exists a component that allows users to watch videos (constructed using the HTML Video tag). Additionally, beneath the video, there are various dropdowns and buttons. However, our focus will be on the HTML Video component.
The layout of this page can be illustrated schematically 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>
Currently, I am adjusting the size of the HTML Video by applying padding on the left and right. However, I am aware that this method may not be universally applicable. See 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 have only provided a snippet of the code; it's clear that there are many more conditions involved. Hence, my query is: Is it possible to dynamically adjust the size of the HTML Video based on screen dimensions and zoom levels, akin to YouTube's approach?