Vue js 中的视频不以全宽和高度显示答案

【问题标题】：Video in Vue js doesn't show in Full width & HeightVue js 中的视频不以全宽和高度显示
【发布时间】：2020-09-24 14:40:34
【问题描述】：

我想做一些这样的

不幸的是，视频没有全高显示，而是视频有点超出屏幕的高度，我什至看不到控件。

我希望视频覆盖 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>

【问题讨论】：

标签： html css vue.js sass

【解决方案1】：

找到了解决此问题的方法。我们可以操作Video Object，它可以改变视频光学但变化不大，我们可以很容易地使用它。

video {
    height: 100vh;
    width: 100vw;
    object-fit: fill;
}

【讨论】：