How to set exact width and height of video content in video tag

Issue

Having this video tag:

<video id="video" width="300" height="300" autoplay></video>

and

var video = document.getElementById('video') as any;
var mediaConfig = { video: true };

// Put video listeners into place
navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
  video.src = window.URL.createObjectURL(stream);
  video.play();
}, (e) => {
  console.log('An error has occurred!', e)
});

I display my camera stream on the video tag. However, width & height of 300px are width of whole tag, and video itself has some bottom / top padding, however this padding is not in CSS. How can I make video size to be exactly 300x300?

Solution

Is that what you are looking for? I just tried with overlapping a div upon the video with 300px*300px. May be this will help you..Try once.

<div style="width: 300px; height:300px; overflow: hidden;">
    <video loop="loop" style="width: 100%;" autoplay="autoplay">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>        
    </video>
</div>

Answered By - Ganesh Putta