Keep HTML5 Background-Video fullscreen (on mobile)

Question

Problem: When I resize my browser window, my already well aligned video will keep filling the screen while sustaining aspect ratio, as long as the width of the window is larger than the height. When the height of the window starts to get larger than the width, whitespace will appear on the top and bottom of the video.
My Code: I´m currently using the following CSS Code for the below HTML code:

.bgvideodiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    -webkit-filter: blur(5px) brightness(50%);
    -moz-filter: blur(5px) brightness(50%);
    -o-filter: blur(5px) brightness(50%);
    -ms-filter: blur(5px) brightness(50%);
    filter: blur(5px) brightness(50%);
    overflow: hidden !important;
  }
  .bgvideo {
    height: 100%;
    min-width: 100%;
    width: auto;
    /* Same: object-fit: fill; */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .scaler {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    overflow: hidden;
    transform: scale(1.2);
  }

<div class="scaler">
    <div class="bgvideodiv">
      <video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
        <source src="hero.mp4" type="video/mp4"></source>
        <source src="hero.webm" type="video/webm"></source>
      </video>
    </div>
  </div>

(You will have to add your own video mp4 and webm for this snippet to work)
I´d prefer a pure CSS solution, but JS / jQuery is fine, too.

I´VE FOUND A SOLUTION FOR THIS; SEE BELOW.

Answer 1

Turns out bulma, the CSS Framework I´m using, automatically applies a max-width: 100%; rule to all video, img, object, embed and iframe objects (out of no reason, as it seems). I´ve disabled the rule with the following snippet, insert it anywhere below the embedding of bulma:

embed, iframe, img, object, video {
   max-width: none;
}

Any max-width rules which should override this value will have to be placed below this one.
Everything is working fine now, thanks for any suggestions anyway.