Javascript 如何使视频背景响应？

我的背景视频在全尺寸笔记本电脑/桌面显示器上正确显示，但当我开始最小化时，它会变得笨重，视频会放大到建筑物上，并且在移动显示器上的高度太长

我可以使用哪些媒体查询来使此视频背景更具响应性

它不一定要在手机上完美，但要有点像样

。全屏背景{
位置：相对位置；
最高：50%；
右：50%；
底部：0px；
左：0px；
溢出：隐藏；
z指数：-1px；
}
.全屏视频{
位置：相对位置；
排名：0；
左：0；
宽度：自动；
高度：自动；
背景尺寸：封面；
过渡：1s不透明度；
显示：内联块；
}
@介质（最小纵横比：16/9）{
.全屏视频{
身高：300%；
前-100%；
}
}
@介质（最大纵横比：16/9）{
.全屏视频{
宽度：300%；
左-100%；
}
}
@介质（最大宽度：767px）{
.全屏背景{
背景：url（'../img/videoframe.jpg'）居中/封面不重复；
}
.全屏视频{
显示：无；
}
}

美丽。
景色。芝加哥市

试试这个

position: relative;
right: 0;
bottom: 0;
max-width: 100%;
min-height: 100%;
width: auto;
height: auto;

---

响应不一定意味着或需要媒体查询。只需为

视频

元素提供

宽度

或

高度

（并非两者）的相对大小，您的视频就可以响应，然后我们通常会为

最小值

和

最大值

高度/宽度设置一个值，以将大小限制在一定范围内。对于媒体查询（这当然很好），您将遇到“断点”，即新查询开始，突然，您的内容将“捕捉”到新查询的样式。使用相对大小不会导致这种情况。您还可以在一个媒体查询中设置

高度

，在另一个媒体查询中设置

宽度

——保持一致。在所有媒体查询中使用相同的属性，或确保在新媒体查询中重置任何先前设置的属性。您好，谢谢您的回答。最好包括一些解释，而不仅仅是建议的解决方案。为什么会这样？还有一些指导。你希望OP把代码放在哪里？