将HTML5视频扩展到全屏显示，而视频标签没有黑条

Question

我正在尝试开发一个包含视频的网络应用程序，该视频可以扩展到最大程度而不会丢失宽高比。同时，视频应悬停播放。正如您在此处看到的，我几乎完成了此任务：

https://jsfiddle.net/efLtpu8v/5/

我让视频在这里进行悬停播放：

window.onload = function() {
  let vid = document.getElementById('vid');
  vid.addEventListener('mouseover', function(e) {
    vid.play();
  });
  vid.addEventListener('mouseout', function(e) {
    vid.pause();
  });
}

我的CSS可以最大程度地保持视频长宽比：

width: 100%;
height: 100%;
object-fit: contain;

问题在于，不仅视频会扩展，而且视频标签本身还会以某种方式添加黑条（您可以从蓝色条中看到）。当它们填满屏幕的其余部分时，用户必须完全离开页面才能停止视频，但是我需要他*她能够在“悬停”视频周围的空间时停止视频。

有没有办法做到这一点？