我想做一些像这样的

不幸的是，视频没有显示在全高，相反，视频的高度被咬出屏幕，我甚至看不到控制。

我想要视频覆盖100%的高度和宽度。

我的整个组件的css是这样的:

.screensaver {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: gray;
 z-index: 9000;
 .logo{
     background-image: url(~@/assets/test.svg);
 }
&-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.00) 100%);
    z-index: 1500;
    display: flex;
    align-items: center;
    padding: $layout-size*1.25 $layout-size;
    &-left{
        flex: 0 0 320px;
    }
}
&-body {
    top: 0;
    position: absolute;
    height: 100vh;
    width: 100vw;
    &:after{
        content:'';
        background-color: rgba(0,0,0, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    video{
        min-height: 100%;
        min-width: 100%;
        height: 100vh;
        display: block;
    }
    &-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 10;            
       }
    }
 }

我的vue模板:

    <template>
        <div class="screensaver">
          <div class="screensaver-header">
            <div class="screensaver-header-left">
                <span class="logo">Test</span>
            </div>
        </div>
        <div class="screensaver-body">
            <video controls autoplay muted loop>
                <source :src="require('test.mp4')" type="video/mp4">
            </video>
            <div class="screensaver-body-center">
                <span>icon</span>
                <h2>plz touch to unlock</h2>
            </div>
        </div>
      </div>

null