> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Video View Customisation

> CometChat Calling SDK v4 - Stable Release - Video View Customisation for Flutter

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

## Implementation

Once you have decided to implement [Ringing](/calls/v4/flutter/ringing) or [Call Session](/calls/v4/flutter/call-session) 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 [Ringing](/calls/v4/flutter/ringing) or [Call Session](/calls/v4/flutter/call-session).

## 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. <br /><br />Possible values: <br />1. `VideoStreamsMode.ASPECT_RATIO_CONTAIN` <br />2. `VideoStreamsMode.ASPECT_RATIO_COVER` <br />3. `VideoStreamsMode.ASPECT_RATIO_DEFAULT` <br /><br />Default value = `VideoStreamsMode.ASPECT_RATIO_DEFAULT`                                                                                                                                                                                                                                                                   |
| `setFullScreenButtonParams(String position, Boolean visibility)`                  | This method is used to set the position & visibility parameter of the full screen button. <br /><br />Possible values for position: <br />1. `VideoStreamsPosition.POSITION_TOP_RIGHT` <br />2. `VideoStreamsPosition.POSITION_TOP_LEFT` <br />3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT` <br /><br />Possible values for visibility: <br />1. `true` <br />2. `false` <br /><br />Default Values: <br />Position: `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />Visibility: `true`                             |
| `setNameLabelParams(String position, Boolean visibility, String backgroundColor)` | This method is used to set the position, visibility & background color of the name label. <br /><br />Possible values for position: <br />1. `VideoStreamsPosition.POSITION_TOP_RIGHT` <br />2. `VideoStreamsPosition.POSITION_TOP_LEFT` <br />3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT` <br /><br />Possible values for visibility: <br />1. `true` <br />2. `false` <br /><br />Default Values: <br />Position: `VideoStreamsPosition.POSITION_BOTTOM_LEFT` <br />Visibility: `true` Background Colour: `#333333` |
| `setZoomButtonParams(String position, Boolean visibility)`                        | This method is used to set the position, visibility of the zoom button. <br /><br />Possible values for position: <br />1. `VideoStreamsPosition.POSITION_TOP_RIGHT` <br />2. `VideoStreamsPosition.POSITION_TOP_LEFT` <br />3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT` <br /><br />Possible values for visibility: <br />1. `true` <br />2. `false` <br /><br />Default Values: <br />Position: `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />Visibility: `true`                                               |
| `setUserListButtonParams(String position, Boolean visibility)`                    | This method is used to set the position, visibility of the user list button. <br /><br />Possible Values for position: <br />1. `VideoStreamsPosition.POSITION_TOP_RIGHT` <br />2. `VideoStreamsPosition.POSITION_TOP_LEFT` <br />3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT` <br /><br />Possible Values for visibility: <br />1. `true` <br />2. `false` <br /><br />Default Values: <br />Position: `VideoStreamsPosition.POSITION_BOTTOM_RIGHT` <br />Visibility: `true`                                          |

Example:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MainVideoContainerSetting videoSettings = MainVideoContainerSetting();
    videoSettings.setMainVideoAspectRatio(VideoStreamsMode.ASPECT_RATIO_CONTAIN);
    videoSettings.setNameLabelParams(VideoStreamsPosition.POSITION_TOP_LEFT, true, "#000");
    videoSettings.setZoomButtonParams(VideoStreamsPosition.POSITION_TOP_RIGHT, true);
    videoSettings.setUserListButtonParams(VideoStreamsPosition.POSITION_TOP_LEFT, true);
    videoSettings.setFullScreenButtonParams(VideoStreamsPosition.POSITION_TOP_RIGHT, true);
    ```
  </Tab>
</Tabs>