Controlling the size of uiVideoPanel

Question

I'm using the vLine JavaScript API with the uiVideoPanel widget to make WebRTC video calls.

My code looks like this:

window.vlineClient = client_ = 
  vline.Client.create({"serviceId": serviceId, "ui": true,
                       'uiVideoPanel':'showvideo'
});

and HTML:

<div class='span5'
     style="width:300px;height:300px;background-color: #eeeeee;" 
     id='showvideo'>
</div> 

However when one person calls another, the video takes up the full screen instead of only 300px by 300px.

How can I control the size of the video?

Answer 1

Make sure you set the CSS position to relative or absolute.

For example, with the HTML you provided it would be:

<div class='span5'
     style="width:300px;height:300px;background-color: #eeeeee; position: absolute;" 
     id='showvideo'>
</div>