I have the Problem that on my Login Page I have a Video Background witch doesnt fit the whole width of the screen. The background works perfectly but the video background doesn not fit 100% automatically.
This is how my Login Screen should look like:
This is how my Login Screen actually looks on a device:
As you can see the screen of my Device is to wide for the video. You can see it because of the white bars on the left and right side of the screen. So is there any way to automatically stretch the video always to 100% width?
This is my HTML Snippet:
<video webkit-playsinline playsinline autoplay loop muted id="introp99">
<source src="assets/video/introp99.mp4" type='video/mp4; codecs="h.264"'>
<source src="assets/video/introp99.webm" type="video/webm">
</video>
And this is my CSS Snippet:
//P99 Background Video
#introp99 {
position: fixed;
filter: blur(2px);
padding:0px;
top: 50%;
left: 50%;
min-width: 150vw;
width:105%;
height:105%;
z-index: -100;
-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%);
background: url('../assets/video/introp99.mp4') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
As you can see in my CSS I already tried to set the width above 100% like width: 110% or width: 150vw; but nothing changes. The Video stays always in the same format and does not stretch.