我的背景视频在全尺寸笔记本电脑/台式机显示器上显示正确,但当我开始最小化时,它变得笨拙,并且视频在建筑物上放大,它的高度在移动显示器上太长。
我可以使用哪些媒体查询来使此视频背景更具响应性?
它不必在移动设备上完美,但还算不错。
.fullscreen-bg {
position: relative;
top: 50%;
right: 50%;
bottom: 0px;
left: 0px;
overflow: hidden;
z-index: -1px;
}
.fullscreen-bg__video {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
background-size: cover;
transition: 1s opacity;
display: inline-block;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
<section>
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/index-11.jpg" class="fullscreen-bg__video">
<source src="video/BnW.webm" type="video/webm">
<source src="video/BnW.mp4" type="video/mp4">
</video>
<div class="container container-wide slider-container">
<div class="jumbotron text-center bg-btn">
<h1 data-wow-duration="2s" class="wow fadeIn">Beautiful.<br>Views.<small data-wow-duration="2s" class="wow fadeIn">City of Chicago</small></h1>
<p data-wow-duration="2s" class="big wow fadeIn"></p>
</div>
</div>
</div>
</section>
最佳答案
试试这个
position: relative;
right: 0;
bottom: 0;
max-width: 100%;
min-height: 100%;
width: auto;
height: auto;
关于javascript - 如何使视频背景响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44030124/