https://i.sstatic.net/fcKiP.pngUtilizing Twilio Video for a feature that resembles a Zoom call, where each webcam feed is contained within a div.
After experimenting with CSS, I have managed to keep everything within the div, but now only a portion of the webcam feed is visible. As shown in the screenshot below, the second div displays a limited view of the actual feed, which should be showing my face entirely.
It's worth noting that the current width and height of the divs are not what I intend them to be; I am simply trying to make things functional at this stage.
Below is an excerpt from my HTML and CSS:
The video element is dynamically added via JavaScript using the Twilio API, hence its absence from the HTML code. The image is removed once the video is added – it serves as a placeholder when a user is not sharing their video stream.
<div class="row scroll-stream-dash custom-scrollbar-css ">
// More code snippets here...
</div>
.vidparticipant{
height: 300px;
max-width: 300px;
overflow: hidden;
}
video{
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
}
How can I ensure that the webcam video displays its full contents while remaining contained within the div? Any assistance would be greatly appreciated!