响应式视频在移动屏幕中显示空白区域

Question

我有一个页面，里面有响应式视频，它在笔记本电脑或任何宽屏幕都很好用，但是我在移动设备的垂直屏幕上面对视频下面的空白问题，我使用了以下ccs代码：< / p>

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

这里是实时预览：

http://shiftmkt.sa/tec/

Answer 1

试试这个。 如果您需要任何更改，请告诉我。

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>