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

欢迎任何帮助。我是Web开发的初学者，所以请不要太苛刻。每一步都是一次学习体验！

Answer 1

我会使用 vw 而不是 % 或 px！

响应速度更快！除非你想要修复一些东西。那么你应该使用 px。