Chime SDK Video not responsive

Question

I have built a react.js client app that interfaces with the Chime SDK and some REST APIs. It creates a meeting, an attendee, connects the local hardware and starts the audio & video.

My issue is that the video is a fixed size.

It is within a React Bootsrap responsive layout as follows:

<Container fluid style={containerStyle}>
    <Row>
        <Col sm="10">
            <audio id="my-audio-element"></audio>
            <video id="my-video-element"></video>
        </Col>
        <Col sm="2">
            ...
        </Col>
    </Row>
</Container>

The <audio id="my-audio-element"></audio> and <video id="my-video-element"></video> elements are as advised by the SDK documentation. The parent <Col sm="10"> is responsive.

Whatever i do to the page the Chime video remains a fixed size?

UPDATE

Setting class="h-100 w-100" enables the video to resize, however, it still has a fixed aspect ratio?

Answer 1

I found the answer in the SDK demo/browser app:

.video-tile-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}