我有一个包含响应式视频的页面,它在笔记本电脑或任何宽屏上运行良好,但我遇到了垂直屏幕(如手机)视频上方和下方空白的问题,我使用了以下 ccs 代码:
.background-video {
position: fixed;
z-index: -10;
top: 0;
right: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(50%, 0);
-moz-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
-o-transform: translate(50%, 0);
transform: translate(50%, 0);
background: url(../video/video.jpg) no-repeat;
background-size: cover;
}
.section-video {
position: relative;
background-size: cover;
background-position: 50% 50%;
height: 100vh;
z-index: 0;
}
.section-video .bgvid {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
}
这里是实时预览:
最佳答案
试试这个。 如果您需要任何更改,请告诉我。
body{
margin: 0;
padding: 0;
}
.section-video .bgvid {
width: 100%;
height: 100%;
}
<div class="section-video">
<video autoplay="" poster="video/video.jpg" class="bgvid" loop="">
<source src="http://shiftmkt.sa/tec/video/video.webm" type="video/webm">
<source src="http://shiftmkt.sa/tec/video/video.mp4" type="video/mp4">
<source src="http://shiftmkt.sa/tec/video/video.ogv" type="video/ogv">
</video>
</div>
关于html - 响应式视频在手机屏幕上留下空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47484416/