Full Screen Video in Html

I had a task to capture peoples faces for AI biometric recognition for authentication purposes. The “hard” part supposed to be the face recognition (silly me). There are a bunch of libraries to do that for me, but the video html tag went out of control.

The tricky part was to make sure that the video is filling up the screen on desktop, but also on mobile.

When setting width and height to the video tag via js - the video looks weirdly out of place.

The answer lied in the aspect-ratio style. I have to set it to be screenWidth / screenHeight and voila - all looks much better.

<!-- transform: rotate(180deg) so that the video looks like you're looking in the mirror -->
<video id="video" playsinline class="video" style="transform: rotateY(180deg); width: 100%; height: 100%; object-fit: cover;"> </video>

const video = document.getElementById('video');

window.onload = () => {
    video.style.aspectRatio = `${window.innerWidth / window.innerHeight}`
}

window.onresize = () => {
    video.style.aspectRatio = `${window.innerWidth / window.innerHeight}`
}