Can I customize the size of received video which shared by a participant in Twilio programmable video?

Question

I'm developing a video chat application that using twilio programmable video. The room chat in my app only consists of two participants, a web front-end using ReactJS and an tablet device (IOS device). When those two participants joined a room using Twilio, they will share video tracks to each other. When I received the video tracks from the IOS device (The videos' ratio constraint was set 16:9 on that device) and I want to adjust the tablet video ratio (for example 3:4) on my ReactJS app. How can I get that?

I'm trying to using some CSS to make the video element becomes full width and full height. As a result the video element is changed with 100% width and 100% height in relative to their parent element but the actual video frame is not changed at all.

This is my video container

<div className='col-md-6 px-0 video-with-guest-action-container'>
    <div id='remote-video' className=''>
        <canvas id="canvas" hidden></canvas>
    </div>
</div>

The code to attach participant tracks:

// Attach the Tracks of the Room's Participants.
room.participants.forEach((participant) => {
    if (room.participants.size < 1) {
      this.attachParticipantTracks(participant, document.getElementById("remote-video"))
    }
});

And my css code:

#remote-video{
  video {
    border: 1px solid #272727;
    height: 100%;
    width: 100% !important;
    background-color: #272726;
    background-repeat: no-repeat;
  }
}