I am trying to create something similar to this:
https://i.sstatic.net/R8VEy.png
However, the video does not display in full height and width. Instead, it appears cut off at the edges and I cannot see the controls.
I want the video to cover 100% of the height and width.
My CSS code for this component looks 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>Please touch to unlock</h2>
</div>
</div>
</div>