I tried to set the size of a <video> container by various means, including those from Resizing <video> element to parent div, such as:

object-fit: fill;

or the accepted solution from this linked question.

It works, but when

navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { video.srcObject = stream; });

starts displaying the webcam, then the CSS sizing ignored and the video is suddenly enlarged and doesn’t stay in the container div.

I don’t want to set a fixed px height, but I want the video to just take the parent div’s height.

How to set the size of a video to the parent div‘s height, even if the content is streamed with getUserMedia?