Resizing subscriber video

[Shtibel]

Hi there, I want to resize the subscriber video. Like I start with the subscriber HTML container is width: 100%, height: 600px; and I want to change it when clicking on a button to: width: 400px, height: 400px;

If I change the HTML container to this dimension and do: OT.updateViews();

the video stays the same size.

What is the problem ?

[Shtibel]

Hi @msach22 I am trying on iPhone and Android devices. The device width is different in each device. On iPhone it is: 375 On android it is: 360

Here is the code for initialization on subscriber:

The subscriber HTML:

<div id="subscriber"></div>

The subscriber CSS:

#subscriber{
   width: 100%;
   height: 400px;
   display: block;
}

The subscriber ts code:

streamCreated: (event) => {
   this.subscriber = this.session.subscribe(event.stream, 'subscriber', {
      facingMode: 'user',
      insertMode: 'append',
      insertDefaultUI: false,
      style: {buttonDisplayMode: 'off'},
      subscribeToAudio: true, 
      subscribeToVideo: true
   });
   OT.updateViews();
},

So with this initialization the subscriber video has 100% width and 400px height. Now when clicking on a button I want to change the video size.

So this is my code:

The subscriber CSS:

#subscriber.small-size{
   width: 100px;
   height: 100px;
}

The subscriber ts code:

changeSubscriberVideoSize(){
   document.getElementById('subscriber').classList.add('small-size');    
   OT.updateViews();
}

After clicking on the button the subscriber HTML container size is 100X100 PX but the native video is still 100% width and 400px height.

The OT.updateViews(); does not update the subscriber native video to the new size given for the <div> container.

What can be the problem ?