Responsive Video macht weiße Flecken in mobilen Bildschirm

Question

Ich habe eine Seite, die reaktionsschnelle Video in es, funktioniert gut in Laptop oder einem breiten Bildschirm, aber ich stelle ein Problem von Leerraum über nad unter dem Video im vertikalen Bildschirm wie Handys , verwendet i ccs Code folgende:

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

hier ist die Live-Vorschau:

http://shiftmkt.sa/tec/

Answer 1

Versuchen Sie dies. Lassen Sie mich wissen, wenn Sie Änderungen benötigen.

body{ 
 
\t margin: 0; 
 
\t 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>