> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Video View Customisation

> Customize the main video container in CometChat calls — aspect ratio, full screen button, name label, and network label positioning.

<Accordion title="AI Integration Quick Reference">
  * **Class:** `CometChat.MainVideoContainerSetting`
  * **Apply via:** `CallSettingsBuilder.setMainVideoContainerSetting(videoSettings)`
  * **Customizable elements:** Aspect ratio, full screen button, name label, network label
  * **Position constants:** `POSITION_TOP_LEFT`, `POSITION_TOP_RIGHT`, `POSITION_BOTTOM_LEFT`, `POSITION_BOTTOM_RIGHT`
  * **Requires:** [Default Calling](/sdk/javascript/default-call) or [Direct Calling](/sdk/javascript/direct-call) setup
</Accordion>

Customize the main video container in your call UI — aspect ratio, button positions, and label visibility. Create a `MainVideoContainerSetting` instance, configure it, and pass it to `CallSettingsBuilder.setMainVideoContainerSetting()`.

Before you begin, make sure you've set up [Ringing](/sdk/javascript/default-call) or [Call Session](/sdk/javascript/direct-call).

## MainVideoContainerSetting

| Method                                                      | Description                                                                          | Default                                       |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------- |
| `setMainVideoAspectRatio(aspectRatio)`                      | Aspect ratio of the main video. Values: `ASPECT_RATIO_CONTAIN`, `ASPECT_RATIO_COVER` | `ASPECT_RATIO_CONTAIN`                        |
| `setFullScreenButtonParams(position, visibility)`           | Position and visibility of the full screen button.                                   | Bottom-right, visible                         |
| `setNameLabelParams(position, visibility, backgroundColor)` | Position, visibility, and background color of the participant name label.            | Bottom-left, visible, `rgba(27, 27, 27, 0.4)` |
| `setNetworkLabelParams(position, visibility)`               | Position and visibility of the network quality label.                                | Bottom-right, visible                         |

### Position Constants

All position parameters accept one of these values from `CometChat.CallSettings`:

* `POSITION_TOP_LEFT`
* `POSITION_TOP_RIGHT`
* `POSITION_BOTTOM_LEFT`
* `POSITION_BOTTOM_RIGHT`

### Example

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let videoSettings: CometChat.MainVideoContainerSetting = new CometChat.MainVideoContainerSetting();

    videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);
    videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
    videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)");
    videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);

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

  <Tab title="JavaScript">
    ```javascript theme={null}
    let videoSettings = new CometChat.MainVideoContainerSetting();

    videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);
    videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
    videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)");
    videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);

    // Pass to CallSettingsBuilder
    const callSettings = new CometChatCalls.CallSettingsBuilder()
      .setMainVideoContainerSetting(videoSettings)
      // ... other settings
      .build();
    ```
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={2}>
  <Card title="Default Calling" icon="phone" href="/sdk/javascript/default-call">
    Implement default audio/video calling.
  </Card>

  <Card title="Direct Calling" icon="video" href="/sdk/javascript/direct-call">
    Implement direct calling without call events.
  </Card>

  <Card title="Virtual Background" icon="image" href="/sdk/javascript/virtual-background">
    Add virtual background and blur effects.
  </Card>

  <Card title="Recording" icon="circle-dot" href="/sdk/javascript/recording">
    Record calls for playback.
  </Card>
</CardGroup>