> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Video View Customisation

This section will guide you to customise the main video container.

## Implementation

Once you have decided to implement [Direct Calling](/sdk/ionic/direct-call) and followed the steps to implement them. Just few additional methods will help you quickly customize the main video container.

Please make sure your callSettings is configured accordingly for [Direct Calling](/sdk/ionic/direct-call).

## Main Video Container Setting

The `MainVideoContainerSetting` Class is the required in case 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`.

| Setting                                                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setMainVideoAspectRatio(aspectRatio: string)`                                       | This method is used to set the aspect ratio of main video. <br /><br />**Default Value:** `contain` <br /><br />**Possible Values:** <br />1. `CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN` <br />2. `CometChatCalls.CallSettings.ASPECT_RATIO_COVER`                                                                                                                                                                                                                                                                                                        |
| `setFullScreenButtonParams(position: string, visibility: boolean)`                   | This method is used to set the position & visibility parameter of the full screen button. <br /><br />**Default:** Visible in the bottom-right position <br /><br />**Possible Values for POSITION:** <br />1. `CometChatCalls.CallSettings.POSITION_TOP_LEFT` <br />2. `CometChatCalls.CallSettings.POSITION_TOP_RIGHT` <br />3. `CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT` <br />4. `CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT` <br /><br />**Possible Values for VISIBILITY:** <br />1. `true` <br />2. `false`                                |
| `setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)` | This method is used to set the position, visibility & background color of the name label. <br /><br />**Default:** Visible in the bottom-left position with background-color `#333333` <br /><br />**Possible Values for POSITION:** <br />1. `CometChatCalls.CallSettings.POSITION_TOP_LEFT` <br />2. `CometChatCalls.CallSettings.POSITION_TOP_RIGHT` <br />3. `CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT` <br />4. `CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT` <br /><br />**Possible Values for VISIBILITY:** <br />1. `true` <br />2. `false` |
| `setZoomButtonParams(position: string, visibility: boolean)`                         | This method is used to set the position, visibility of the zoom button. <br /><br />**Default:** Visible in the bottom-right position <br /><br />**Possible Values for POSITION:** <br />1. `CometChatCalls.CallSettings.POSITION_TOP_LEFT` <br />2. `CometChatCalls.CallSettings.POSITION_TOP_RIGHT` <br />3. `CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT` <br />4. `CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT` <br /><br />**Possible Values for VISIBILITY:** <br />1. `true` <br />2. `false`                                                  |
| `setUserListButtonParams(position: string, visibility: boolean)`                     | This method is used to set the position, visibility of the user list button. <br /><br />**Default:** Visible in the bottom-right position <br /><br />**Possible Values for POSITION:** <br />1. `CometChatCalls.CallSettings.POSITION_TOP_LEFT` <br />2. `CometChatCalls.CallSettings.POSITION_TOP_RIGHT` <br />3. `CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT` <br />4. `CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT` <br /><br />**Possible Values for VISIBILITY:** <br />1. `true` <br />2. `false`                                             |

Example:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import { CometChatCalls } from '@cometchat/calls-sdk-ionic';

    let videoSettings = new CometChatCalls.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);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    import { CometChatCalls } from '@cometchat/calls-sdk-ionic';
    import { MainVideoContainerSetting } from '@cometchat/calls-sdk-ionic/dist/models/CallSettings';

    let videoSettings: MainVideoContainerSetting = new CometChatCalls.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);
    ```
  </Tab>
</Tabs>

Once you have the `MainVideoContainerSetting` object, pass it to `CallSettingsBuilder` via the `setMainVideoContainerSetting` method as shown below,

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import { CometChatCalls } from '@cometchat/calls-sdk-ionic';

    const callSettings = new CometChatCalls.CallSettingsBuilder()
      .setMainVideoContainerSetting(videoSettings)
      .build();
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    import { CometChatCalls } from '@cometchat/calls-sdk-ionic';
    import { CallSettings } from '@cometchat/calls-sdk-ionic/dist/models/CallSettings';

    const callSettings: CallSettings = new CometChatCalls.CallSettingsBuilder()
      .setMainVideoContainerSetting(videoSettings)
      .build();
    ```
  </Tab>
</Tabs>