Maintain HTML video quality

Question

So i have written this code and I need help in maintaining the quality of the video when I make it take up the entire screen. The video I add is a link from a site (originally i wanted to add a video from my local storage but wasn't showing so I gave that up.) The quality drops (obviously) when its stretched across the screen so I need help in managing quality.

The CSS

    body {
  position: relative;
  overflow: hidden;
  background-color:black;
  font-family: 'Chakra Petch', sans-serif;
  color: white;
}
 video {
  position: absolute;
  top: 0;
  width:100% !important;
  z-index: 1;/*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity: 0.6;
}

 
                 <video autoplay muted loop>    
                  <source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&amp;profile_id=139&amp;oauth2_token_id=57447761" type="video/mp4">                 </video>
                 
                 <div class="container">
                   <span style="font-size: 63px">Anomaly Detection Portal</span> 
                     <span>
                       <h4>
                          Use our state-of-the-art technology to find out anomalies in your traffic videos.

                       </h4>
                       <h5>
                        Our futuristic models give the maximum accuracy in more than 90% of the cases.
                       </h5>
                      </span>
                     <a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
                 </div>
                   <!-- /.container -->
                 </div>
                 <!-- /.jumbotron -->