> ## 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 React Native calls, including aspect ratio, full-screen button, name labels, zoom, and user list button positioning.

<Info>
  **Quick Reference** - Customize the main video container:

  ```javascript theme={null}
  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");

  // Pass to CallSettingsBuilder
  new CometChatCalls.CallSettingsBuilder()
    .setMainVideoContainerSetting(videoSettings)
    .build();
  ```
</Info>

## Overview

This section guides you through customizing the main video container in your call UI.

Once you have decided to implement [Ringing](/sdk/react-native/default-call) or [Call Session](/sdk/react-native/direct-call) 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](/sdk/react-native/default-call) or [Call Session](/sdk/react-native/direct-call).

## 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`.

| Setting                                                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setMainVideoAspectRatio(aspectRatio: string)`                                       | This method is used to set the aspect ratio of main video. The default value is **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. By default the full screen button is 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. 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. **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. By default the zoom button is 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. By default the user list button is 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}
    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);
    ```
  </Tab>
</Tabs>

## Best Practices

<AccordionGroup>
  <Accordion title="Keep controls accessible">
    Avoid placing multiple buttons in the same corner position. Overlapping controls can make the UI confusing and hard to interact with. Spread controls across different corners for a clean layout.
  </Accordion>

  <Accordion title="Use ASPECT_RATIO_CONTAIN for most use cases">
    The `ASPECT_RATIO_CONTAIN` mode ensures the full video frame is visible without cropping. Use `ASPECT_RATIO_COVER` only when you want the video to fill the container and are okay with some edges being clipped.
  </Accordion>

  <Accordion title="Test on multiple screen sizes">
    Video container customizations can look different across devices. Test your button positions and label visibility on both small phones and larger tablets to ensure a consistent experience.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Custom settings not applied">
    Ensure you pass the `MainVideoContainerSetting` object to `setMainVideoContainerSetting()` on the `CallSettingsBuilder` before calling `.build()`. Settings applied after building won't take effect.
  </Accordion>

  <Accordion title="Buttons not visible">
    Check that the `visibility` parameter is set to `true` for the button you want to show. Also verify that `enableDefaultLayout(true)` is set in your `CallSettingsBuilder`, as custom video settings work alongside the default layout.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Session" icon="video" href="/sdk/react-native/direct-call">
    Start and manage call sessions with full configuration options
  </Card>

  <Card title="Recording" icon="circle-dot" href="/sdk/react-native/recording">
    Record call sessions for playback and compliance
  </Card>

  <Card title="Presenter Mode" icon="presentation-screen" href="/sdk/react-native/presenter-mode">
    Enable screen sharing and presenter layouts in calls
  </Card>

  <Card title="Ringing" icon="phone-volume" href="/sdk/react-native/default-call">
    Implement a complete calling experience with incoming and outgoing call UI
  </Card>
</CardGroup>