Video Background does not fill Background?

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">

And this is my CSS Snippet:

//P99 Background Video
  #introp99 {
      position: fixed;
      filter: blur(2px);
      top: 50%;
      left: 50%;
      min-width: 150vw;
      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.

I got it finally to work by adding object-fit: fill; to my video css.


i I’m trying to add video on background just like you… But the video takes some time before playing… any suggestion how can I fix this that is video should start playing as soon as the user enters the view…

Also I noticed that typing is really slow if filter blur property is used… Did you encounter any similar issue?