Video in Vue js doesn't show in Full width & Height - html

Question

i want to make some like this
Unfortunately the video does't show in full height, instead the video is bit out of the screen in height, i cannot even see controls.
I want the video to cover 100% height and width.
My css for this whole component is like this:
.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;
}
}
}
=================
My vue Template:
<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>

Answer 1

Found a solution to this Problem. We can manipulate the Video Object, which can change the video optical but the changes are not big, we can easily use this.
video {
height: 100vh;
width: 100vw;
object-fit: fill;
}