How to Prevent HTML Video element from changing dimensions based on srcObject quality?

  css, html, javascript, video

I am working on a project where I have dynamically set the srcObject property of an HTML video element but when the source stream changes, the video element changes its dimensions and scales down to match the input from the stream. I want to ensure that the video element stays at the same size and I am fine if the video gets pixelated / low-res but its dimensions should not change. Please help me in doing this.

localVideo.srcObject = stream;

This is the only parameter that I have set for this video element. I tried styling it using CSS to set the width and height but the video still resizes based on the stream size. I want it to upscale to fit the container. The object-fit is set to cover in CSS.

Source: Ask Javascript Questions