Html 删除特定浏览器格式上的白色条-视频背景

我有一个背景视频，如果我将浏览器缩放到一定的高度，它会显示白色条，有没有办法解决这个问题

html:

我看到的解决方案是：

.video-wrapper {
  position: relative;
  width : 100%;
  max-width : 100%;
  height : 0;
  padding : 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
  overflow : hidden;
}

.video-wrapper > * {
  position : absolute;
  width : 100%;
  height : 100%;
  top : -11%;
  left : 0;
  border: none;

}

---

上面的解决方案与我现在的代码完全相同。。我是否可以强制浏览器始终使用16:9格式，或使其在白条显示之前以不同分辨率溢出？

尝试使用jquery窗口大小调整功能

html{
width: 100%;
height: 100%;
overflow: hidden;
}

body{
    height: 100%;
    width: 100%;
    font-size: 13.5px;
    margin: 0 auto; 
    font-family: Arial, Helvetica, sans-serif;
    background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    font-size: 100%;
    overflow:hidden;    

}

#background{
    overflow:hidden;
    width: 100%;
    position: relative;
    min-width: 640px;
    min-height: 360px;
}

.video-wrapper {
  position: relative;
  width : 100%;
  max-width : 100%;
  height : 0;
  padding : 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
  overflow : hidden;
}

.video-wrapper > * {
  position : absolute;
  width : 100%;
  height : 100%;
  top : -11%;
  left : 0;
  border: none;

}

$( window ).resize(function() {
  ...
});