> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.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 [Default Calling](/sdk/flutter/3.0/default-calling) or [Direct Calling](/sdk/flutter/3.0/direct-calling) calling 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 [Default Calling](/sdk/flutter/3.0/default-calling) or [Direct Calling](/sdk/flutter/3.0/direct-calling).

## 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(String aspectRatio)`                                     | This method is used to set the aspect ratio of main video. The default value is **contain.** Possible Values: <br />**1. CallSettings. ASPECT\_RATIO\_CONTAIN** <br />**2. CallSettings. ASPECT\_RATIO\_COVER**                                                                                                                                                                                                                                                                                                                           |
| `setFullScreenButtonParams(String position, Boolean visibility)`                  | This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the **bottom-right** position. <br /><br />Possible Values for **POSITION:** <br />1. **CallSettings. POSITION\_TOP\_LEFT** <br />2. **CallSettings. POSITION\_TOP\_RIGHT** <br />3. **CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CallSettings. POSITION\_BOTTOM\_RIGHT** <br /><br />Possible Values for **VISIBILITY:** <br />1. **true** <br />2. **false**                           |
| `setNameLabelParams(String position, Boolean visibility, String backgroundColor)` | This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the **bottom-left** position with a background-color **#333333** <br /><br />Possible Values for **POSITION:** <br />1. **CallSettings. POSITION\_TOP\_LEFT** <br />2. **CallSettings. POSITION\_TOP\_RIGHT** <br />3. **CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CallSettings. POSITION\_BOTTOM\_RIGHT** <br /><br />Possible Values for **VISIBILITY:** <br />1. **true** <br />2. **false** |
| `setZoomButtonParams(String position, Boolean visibility)`                        | This method is used to set the position, visibility of the zoom button. By default the zoom button is visible in the **bottom-right** position. <br /><br />Possible Values for **POSITION:** <br />1. **CallSettings. POSITION\_TOP\_LEFT** <br />2. **CallSettings. POSITION\_TOP\_RIGHT** <br />3. **CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CallSettings. POSITION\_BOTTOM\_RIGHT** <br /><br />Possible Values for **VISIBILITY:** <br />1. **true** <br />2. **false**                                                    |
| `setUserListButtonParams(String position, Boolean visibility)`                    | This method is used to set the position, visibility of the user list button. By default the user list button is visible in the **bottom-right** position. <br /><br />Possible Values for **POSITION:** <br />1. **CallSettings. POSITION\_TOP\_LEFT** <br />2. **CallSettings. POSITION\_TOP\_RIGHT** <br />3. **CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CallSettings. POSITION\_BOTTOM\_RIGHT** <br /><br />Possible Values for **VISIBILITY:** <br />1. **true** <br />2. **false**                                          |

Example:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MainVideoContainerSetting videoSettings = MainVideoContainerSetting();
    videoSettings.setVideoStreamProp("contain");
    videoSettings.setNameLabelProps("top-left", true, "#000");
    videoSettings.setZoomButtonProps("top-right", true);
    videoSettings.setUserListButtonProps("top-left", true);
    videoSettings.setFullScreenButtonProps("top-right", true);
    ```
  </Tab>
</Tabs>