HTML 비디오가 반응하지 않습니다.

Question

저는 비디오 배경과 머리글로 잠시 비틀 거리며 비디오를 창 크기에 맞게 반응하지 않습니다. 고정 된 높이/너비를 유지하고 있으며 %를 사용하여 CSS를 변경하면 사라집니다. 참고 : 비디오 배경 위에 위의 이미지가 있습니다.

<!--Header--> 
<div id="video-container"> 
    <video preload="auto" autoplay="autoplay" type="video/mp4" src="assets/header.mp4" loop></video> 
    <img class="headerimg" src="assets/hotel 1.png" alt="" height="500" width="500"></img> 
    <a href="#welcome"><img class="dropdown" src="assets/dropdown.png" alt="" height="25" width="25"></img></a> 
</div> 

#video-container { 
width: 100%; 
height: 1000px; 
overflow: hidden; 
position: relative; 
} 

#video-container video { 
min-height: 100%; 
min-width: 100%; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
z-index: -1 
} 

.headerimg { 
margin: 0; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
width: 27%; 
height: auto; 
background-attachment: fixed; 
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */ 
-moz-animation: fadein 5s; /* Firefox < 16 */ 
-ms-animation: fadein 5s; /* Internet Explorer */ 
-o-animation: fadein 5s; /* Opera < 12.1 */ 
animation: fadein 5s; 
} 

어떤 도움을 환영합니다. 웹 개발에 초보자입니다. 너무 가혹하지 마십시오. 모든 단계는 학습 경험입니다!

Answer 1

% 또는 px 대신 vw를 사용합니다!

더 반응 적입니다. ofc를 제외하고는 무언가를 고치고 싶습니다. 그렇다면 px를 사용해야합니다.