Skip to main content
Quick Reference - Customize the main video container:
let videoSettings = new CometChat.MainVideoContainerSetting();
videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333");

new CometChatCalls.CallSettingsBuilder()
  .setMainVideoContainerSetting(videoSettings)
  .build();

​
Overview

This section guides you through customizing the main video container in your call UI. Once you have decided to implement Ringing or Call Session calling and followed the steps to implement them, a few additional methods will help you quickly customize the main video container. Please make sure your callSettings is configured accordingly for Ringing or Call Session.

​
Main Video Container Setting

The MainVideoContainerSetting class is required when you want to customise the main video view. You need to pass the object of the MainVideoContainerSetting class in the setMainVideoContainerSetting() method of the CallSettingsBuilder.
SettingDescription
setMainVideoAspectRatio(aspectRatio: string)Sets the aspect ratio of main video. Default: contain. Possible Values: ASPECT_RATIO_CONTAIN, ASPECT_RATIO_COVER
setFullScreenButtonParams(position: string, visibility: boolean)Sets the position & visibility of the full screen button. Default: visible in bottom-right position.
setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)Sets the position, visibility & background color of the name label. Default: visible in bottom-left with background-color #333333
setZoomButtonParams(position: string, visibility: boolean)Sets the position, visibility of the zoom button. Default: visible in bottom-right position.
setUserListButtonParams(position: string, visibility: boolean)Sets the position, visibility of the user list button. Default: visible in bottom-right position.
Position values: POSITION_TOP_LEFT, POSITION_TOP_RIGHT, POSITION_BOTTOM_LEFT, POSITION_BOTTOM_RIGHT Example: 
let videoSettings = new CometChat.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333");
videoSettings.setZoomButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setUserListButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
  • Avoid placing multiple buttons in the same corner position to prevent overlapping controls
  • Use ASPECT_RATIO_CONTAIN for most use cases to ensure the full video frame is visible
  • Test on multiple screen sizes to ensure consistent experience
  • Custom settings not applied: Ensure you pass the MainVideoContainerSetting object to setMainVideoContainerSetting() before calling .build()
  • Buttons not visible: Check that the visibility parameter is set to true and enableDefaultLayout(true) is set

​
Next Steps

Call Session

Start and manage call sessions with full configuration options

Recording

Record call sessions for playback and compliance

Presenter Mode

Enable screen sharing and presenter layouts in calls

Ringing

Implement a complete calling experience with incoming and outgoing call UI