页面元素根据浏览器窗口大小变化而有比例地伸缩，无滚动条

我要做的页面是：
一个与浏览器窗口等大的页面，整个窗口被一个等大的视频覆盖。页面内容按照浏览器窗口大小的变化而自动伸缩变化，页面布局不变。

HTML代码如下：

<div class="page" id="page" style="zoom: 1">
    <video src="视频地址" id="video" muted autoplay loop class="video"></video>
</div>

CSS样式如下：

.page{
height:100vh;
}

.video{
    width:1920px;//视频大小
    height:auto;
}
//去除页面滚动条
body{
    overflow-x: hidden;
    overflow-y: hidden;
    width:100%;
    height:100%;
}
   

JS代码如下：

var page=document.getElementById("page");
var hei=window.innerHeight;//获得浏览器高度和宽度
var wid=window.innerWidth;
var zom=win/1920;
page.style.zoom=zom;
var ratio=hei/wid;
window.onresize=function(){//窗口大小改变监听
    var new_hei=window.innerHeight;
    var new_wid=window.innerWidth;
    var ra=(new_hei/new_wid)/ratio;
    if(ra>1){
       page.style.zoom=(new_hei/hei)*zom;
    }
    else {
       page.style.zoom=(new_wid/wid)*zom;
    }
};

这里是重点，获得窗口改变前大小和改变后大小，然后计算改变前后宽高比例，决定应该让视频按照页面的宽度显示，或是按照页面的高度显示（因视频要始终占据整个页面）。关于zoom使用