How to display webcam in a small container but keep the high resolution

Question

I want to display the webcam in a small container and it is responsive to mobile, but the problem it is dependent on the width size of the container.

HTML

<div class="col-md-4"></div>
<div class="col-md-4">
     <video id="webcam"></video>
</div>
<div class="col-md-4"></div>

JS

class Webcam {
    constructor(webcamElement) {
      this._webcamElement = webcamElement;
      this._webcamElement.width = 1482;
      this._webcamElement.height = 1000;
    }
}

On the JS I set the width to 1482 but since it is inside the col-md-4 when I downloaded the image it gets the size of col-md-4. The downloaded image size is 829 x 1000. How can I keep the high resolution even though the container size is small?