ウィンドウサイズに合わせてDIV要素を拡大縮小できない

実現したいこと

ウィンドウサイズの拡大縮小に合わせてDIV要素も拡大縮小したい。

前提

video要素でインタラクティブな実装を書いています！

video要素と自作のプログレスバーを1つのDIV要素で可変したいのですが、ググって見つけたやり方を参考に、Javascriptでウィンドウのサイズの取得をして、DIV要素の高さと幅を合わせて計算して、div要素がウィンドウサイズに収まっている時と、はみ出している時の実装を書いてみているのですが、div要素が縮小しません！

もちろん原因は知識不足なのですが、推測でdiv要素の幅と高さを書き換えたらvideo要素とプログレスバーが一緒に動くので、div要素の挙動を実装できればと思い試しています！

一番はウィンドウサイズにdiv要素が収まるように実装したいです！

ちょっと困ってしまいまして、何か回答いただける方がいらっしゃいましたらアドバイスいただけないでしょうか？

よろしくお願いします！

// HTML

<main> <div class="interactive_videos"> <!-- video要素 --> <div class="videos_box" id="videos"> <video id="insurance_a" class="vi_A" src="video/opening-01.mp4" type="video/mp4" preload="none" playsinline></video> <video id="insurance_b" class="vi_B" src="video/iryou-minaoshi-02.mp4" type="video/mp4" preload="none" playsinline></video> <video class="vi_C" id="insurance_c" src="video/shibou-minaoshi-02.mp4" type="video/mp4" preload="none" playsinline></video> <video class="vi_D" id="insurance_d" src="video/gan-minaoshi-02.mp4" type="video/mp4" preload="none" playsinline></video> <video class="vi_E" id="insurance_e" src="video/jibyou-minaoshi-02.mp4" type="video/mp4" preload="none" playsinline></video>

<div class="buttons"> <!-- button要素 --> <button class="allbutton insurance_a_1" id="button_b">click"B"</button> <button class="allbutton insurance_a_2" id="button_c">click"C"</button> <button class="allbutton insurance_a_3" id="button_d">click"D"</button> <button class="allbutton insurance_a_4" id="button_e">click"E"</button>

</div> </main> <!-- プログレスバー --> <div id="progress_bar"> <div class="progress_container" id="background_bar"> <div id="controls_button"> <img id="pause" src="img/pause-button.png" alt="一時停止ボタン"> <img id="play" src="img/play-button.png" alt="再生ボタン"> </div> <p id="progress_p_a"> <time id="play_position">0:00</time> <input type="range" id="progress" max="100" value="0"> <time id="end_position">0:00</time> </p> <div id="controls_sound"> <img id="mute" src="img/mute.png" alt="muteボタン"> <img id="unmute" src="img/unmute.png" alt="unmuteボタン"> </div> </div> </div> </div>

// CSS
.main_container {
display: flex;
justify-content: center;
align-items: center;
}

.container {
width: 60%;
height: 100%;
aspect-ratio: 16 / 9;
}

.interactive_videos {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
}

video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}

.vi_A {
z-index: 17;
}

.vi_B {
z-index: 16;
}

.vi_C {
z-index: 15;
}

.vi_D {
z-index: 14;
}

.vi_E {
z-index: 13;
}

.allbutton {
position: absolute;
display: none;
cursor: pointer;
z-index: 300;
}

.insurance_a_1,
.insurance_d_1 {
top: 11.6%;
left: 6.8%;
width: 42.5%;
height: 15%;
opacity: 0;
border: 0;
padding: 0;
}

.insurance_a_2,
.insurance_d_2 {
top: 28.1%;
left: 6.8%;
width: 42.5%;
height: 15%;
opacity: .0;
border: 0;
padding: 0;
}

.insurance_a_3,
.insurance_d_3 {
top: 44.5%;
left: 6.8%;
width: 42.5%;
height: 15%;
opacity: .0;
border: 0;
padding: 0;
}

#background_bar {
display: flex;
align-items: center;
background-color: #282727;
padding: 10px 6px 10px 6px;
border-radius: 8px;
vertical-align: bottom;
}

img {
vertical-align: bottom;
margin: 0 auto;
width: 23px;
height: 23px;
cursor: pointer;
}

// Javascript

const Container = document.querySelector(".container");

const resizeFix = () => {
const checkHeight = document.documentElement.clientWidth / 1280 * 720;
const marginTop = document.documentElement.clientHeight - checkHeight;
const marginBottom = document.documentElement.clientHeight - checkHeight;
const checkWidth = document.documentElement.clientHeight / 720 * 1280;
const marginLeft = document.documentElement.clientWidth - checkWidth;
const marginRight = document.documentElement.clientWidth - checkWidth;

if (document.documentElement.clientWidth >= 1280 && document.documentElement.clientHeight >= 720) {
Container.style.transform = "scale(1.0)";
Container.style.marginLeft = (document.documentElement.clientWidth - 1280) / 2 + "px";
Container.style.marginRight = (document.documentElement.clientWidth - 1280) / 2 + "px";
Container.style.marginTop = (document.documentElement.clientHeight - 720) / 2 + "px";
Container.style.marginBottom = (document.documentElement.clientHeight - 720) / 2 + "px";
} else {
if (checkHeight > document.documentElement.clientHeight) {
Container.style.transform = "scale(' + document.documentElement.clientHeight / 720 + ')";
Container.style.marginLeft = marginLeft / 2 + "px";
Container.style.marginRight = marginRight / 2 + "px";
Container.style.marginTop = 0 + "px";
Container.style.marginBottom = 0 + "px";
} else {
Container.style.transform = "scale(' + document.documentElement.clientWidth / 1280 + ')";
Container.style.marginLeft = 0 + "px";
Container.style.marginRight = 0 + "px";
Container.style.marginTop = marginTop / 2 + "px";
Container.style.marginBottom = marginBottom / 2 + "px";
}
}
}

window.addEventListener("resize", () => {
resizeFix();
});