> ## 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 JavaScript

<Info>
  **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:** [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) setup
</Info>

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

## Implementation

Once you have decided to implement [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/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/javascript/ringing) or [Call Session](/calls/v4/javascript/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(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. CometChat.CallSettings. ASPECT\_RATIO\_CONTAIN\*\*\*\***<br />**2. CometChat.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. **CometChat.CallSettings. POSITION\_TOP\_LEFT** <br />2. **CometChat.CallSettings. POSITION\_TOP\_RIGHT**<br />3. **CometChat.CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CometChat.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 \*\*rgba(27, 27, 27, 0.4)\*\*<br /><br />Possible Values for **POSITION:** <br />1. **CometChat.CallSettings. POSITION\_TOP\_LEFT** <br />2. **CometChat.CallSettings. POSITION\_TOP\_RIGHT**<br />3. **CometChat.CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CometChat.CallSettings. POSITION\_BOTTOM\_RIGHT**<br /><br />Possible Values for **VISIBILITY:** <br />1. **true** <br />2. **false** |
| `setNetworkLabelParams(position: string, visibility: boolean)`                       | This method is used to set the position, visibility of the network label. By default the network label is visible in the **bottom-right** position.<br /><br />Possible Values for **POSITION:** <br />1. **CometChat.CallSettings. POSITION\_TOP\_LEFT** <br />2. **CometChat.CallSettings. POSITION\_TOP\_RIGHT**<br />3. **CometChat.CallSettings. POSITION\_BOTTOM\_LEFT** <br />4. **CometChat.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(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);
    ```
  </Tab>

  <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);
    ```
  </Tab>
</Tabs>

<AccordionGroup>
  <Accordion title="Best Practices">
    | Practice            | Details                                                                                                                                |
    | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
    | Aspect ratio choice | Use `ASPECT_RATIO_CONTAIN` to show the full video without cropping; use `ASPECT_RATIO_COVER` for a full-bleed look that may crop edges |
    | Label positioning   | Avoid placing the name label and network label in the same corner to prevent overlap                                                   |
    | Full screen button  | Keep the full screen button visible for better UX; only hide it if your app provides its own full screen toggle                        |
  </Accordion>

  <Accordion title="Troubleshooting">
    | Symptom                    | Cause                                                                | Fix                                                                                                                              |
    | -------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
    | Video settings not applied | `setMainVideoContainerSetting()` not called on `CallSettingsBuilder` | Pass the `MainVideoContainerSetting` object to `CallSettingsBuilder.setMainVideoContainerSetting()` before calling `startCall()` |
    | Labels overlapping         | Multiple labels positioned in the same corner                        | Assign different position constants to each label                                                                                |
    | Full screen button missing | Visibility set to `false`                                            | Set the second parameter of `setFullScreenButtonParams()` to `true`                                                              |
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Ringing" icon="phone" href="/calls/v4/javascript/ringing">
    Implement ringing with incoming/outgoing call UI.
  </Card>

  <Card title="Call Session" icon="video" href="/calls/v4/javascript/call-session">
    Implement call session management.
  </Card>

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

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