keep webcam feed inside of div but also display entire webcam feed in div

Question

IM using twilio video. I have a feature which acts like a zoom call. Where each webcam feed is div.

I have been messing with the css and I have finally gotten things to stay within the div but now, only a portion of the webcam feed is being shown. Observe the following screen shot. The second div contains a webcam feed. Notice how its only showing a bit of what the actual feed is, as you should able to see my face.

Also please note the divs how they are sized in width and height is not what I want them to be, just trying to get things to work.

Here is my html and css

The video element is being added by javascript via the twilio api hence why you do not see it in the html. Also the img gets removed when the video is added. Its just a placeholder when a user is not sharing their video.

<div class="row scroll-stream-dash custom-scrollbar-css ">
      <div *ngFor="let p of participantsarray" [id]="p.identity" class=" vidparticipant col-6 col-lg-3 col-md-2 mb-3 px-lg-2 px-md-2 px-sm-1 px-xs-1">
        <img [id]="'novideo' + p.identity"  style="width: 100%; height: 100%;" [src]="blackbackground" class=" img-fluid">
        <div class="content_img">
          <div style="display: none" [id]="p.identity + 'da'" class="col-6  text-center">
            <span><i class="fas fa-microphone" aria-hidden="true"></i><br><span style="font-size: 9px;">Mute Audio</span></span>
          </div>
          <div style="display: none" [id]="p.identity + 'ea'" class=" col-6 text-center ">
            <span><i class="fas fa-microphone-alt-slash"></i><br><span style="font-size: 9px;">Unmute Audio</span></span>
          </div>
          <div style="display: none" [id]="p.identity + 'dv'"  class="col-6  text-center">
            <span><i class="far fa-video"></i><br><span style="font-size: 9px;">Hide Video</span></span>
          </div>
          <div style="display: none" [id]="p.identity + 'ev'" class=" col-6 text-center ">
            <span><i class="far fa-video-slash"></i><br><span style="font-size: 9px;">Unhide Video</span></span>
          </div>
        </div>
        <div class="bottom-left-name">{{p.identity}}</div>
      </div>
    </div>


.vidparticipant{
  height: 300px;
  max-width: 300px;
  overflow: hidden;

}

video{
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

how do I properly set the webcam video to show its full contents but also keep that video within the div. Thank you!!!!!!!

Answer 1

To set the video content inside the parent container, you can make use of the CSS property object-fit.

Refer below examples for object-fit and also go through the documentation for better understanding. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Also, explore the possibility of CSS property aspect-ratio to handle the video based on the aspect ratio. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.vidparticipant {
  height: 300px;
  max-width: 300px;
  overflow: hidden;
}

video {
  height: 100%;
  width: 100%;
}

video.object-fit-fill {
  object-fit: fill;
}

video.object-fit-cover {
  object-fit: cover;
}

<h2>object-fit: fill</h2>
<p>If the video aspect ratio does not match the aspect ratio of its box/div, then the object will be stretched to fit.</p>
<div class="vidparticipant">
  <video controls class="object-fit-fill">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

<br>

<h2>object-fit: cover</h2>
<p>If the video aspect ratio does not match the aspect ratio of its box/div, then the object will be clipped to fit.</p>
<div class="vidparticipant">
  <video controls class="object-fit-cover">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>