Video tag to fill 100% div regardless of ratios

Use object-fit css property, though there is no support for IE, but it's still quite reasonable to be used for <video>, <img> tags.

Check CanIUse for Browser Support, and CSS-Tricks for usage.

Example:

/** If parent has some defined width/height */
.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Simple CSS inheit

video {
  width: inherit;
  height: inherit;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}

You can use a solution like this one. Ratio dont change, but you may lose the right part of the video.

video#bgvid {
    position: absolute;
    z-index: 0;
    background: url(mel.jpg) no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.

Edit :

Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video> or <img>

Demo