specific height for video and camera focus

[MarufSharifi]

Hi, thanks for doing this great job,

I want to make the width to be full and height to be a specific percent of height of screen,

current behavior:

when i change the height the width automatically changes base on height and width can't be full.

expected behavior:

when i set the width and height they take place accordingly

[onuh]

Exactly what I want. I can't get fullscreen video on some devices

[onuh]

I got the solution with javascript

You can modify the code below on document ready

var device_height = window.screen.height + 50; var device_width = window.screen.width + 50;

// set height and width of video
document.getElementById('qr-video').style.width = device_width+'px';
document.getElementById('qr-video').style.height = device_height+'px';

[onuh]

It's Implemented in my app here : https://smartchurchattendance.com.ng/smartChurch/downloads/Smart_Church_Mobile_1_2.0.apk

[racosa]

You can use viewport-percentage lengths to set the width/height and object-fit to cover the element:

html:

<video id="qr-video"></video>

css:

#qr-video {
  width: 100vw !important;
  height: 60vh !important;
  object-fit: cover;
}