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

我会使用vw代替％或px！

反应更快！除非你想要一些固定的东西。然后你应该使用px。

HTML视频没有响应

1 个答案: