Javascript 调整大小时的全屏背景视频纵横比

我有以下代码将视频设置为全屏背景。它获取浏览器尺寸并设置纵横比，因此不应该有任何黑条。相反，顶部/底部或侧面溢出，同时仍保持视频居中。 我遇到的问题是，是否调整了浏览器的大小。这是一种工作方式，但我有一种感觉，如果调整的速度很快，脚本就跟不上了，导致一条边上出现空白

代码如下，JSFIDLE如下：

body，html{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.bgvideo{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
z指数：1；
}
.bg视频iframe{
位置：绝对位置；
}

函数videoIframe（）{
//获取浏览器尺寸并计算纵横比
var browswerWidth=$（window.width（）；
var browswerHeight=$（window.height（）；
var aspectRatio=浏览器宽度/浏览器宽度；
如果（aspectRatio<0.5625）{
//视频对视口来说太高。
//将视频宽度设置为浏览器宽度
//根据纵横比设置高度。
//最后，偏移顶部/底部以保持视频居中。
var newHeight=0.5625*浏览器宽度；
$（'.bgvideo iframe'）.css({
“宽度”：浏览器宽度+“px”
});
$（'.bgvideo iframe'）.css({
“高度”：新高度+“px”
});
$（'.bgvideo iframe'）.css({
'底部'：-（（newHeight-browswerHeight）/2）+'px'
});
}否则{
//视频对视口太宽。
//将视频高度设置为浏览器高度
//根据纵横比设置宽度。
//最后，向左/向右偏移以保持视频居中。
var newWidth=browswerHeight/0.5625；
$（'.bgvideo iframe'）.css({
“宽度”：newWidth+“px”
});
$（'.bgvideo iframe'）.css({
“高度”：浏览器高度+“px”
});
$（'.bgvideo iframe'）.css({
'左'：-（（新宽度-浏览器宽度）/2）+'像素'
});
};
};
$（窗口）。调整大小（videoIframe）；
$（文件）.ready（视频帧）；

只需使用设置时间功能即可

var resizeTimer;
$(window).on('resize', function(e) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    videoIframe();
  }, 250);
});

---

只需使用setTime函数即可

var resizeTimer;
$(window).on('resize', function(e) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    videoIframe();
  }, 250);
});