# Video positioning offset in Meeting SDK (React) when using nested containers

**URL:** <https://devforum.zoom.us/t/video-positioning-offset-in-meeting-sdk-react-when-using-nested-containers/140430>\
**Category:** Web\
**Created:** [January 13, 2026, 3:16am UTC](https://devforum.zoom.us/t/video-positioning-offset-in-meeting-sdk-react-when-using-nested-containers/140430 "2026-01-13T03:16:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hackmac](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/hackmac/32/49270_2.png) [@Hackmac](https://devforum.zoom.us/u/Hackmac)\
**Post date:** [January 13, 2026, 3:16am UTC](https://devforum.zoom.us/t/video-positioning-offset-in-meeting-sdk-react-when-using-nested-containers/140430/1 "2026-01-13T03:16:34Z")

</div>

## Bug Report Draft

**SDK Version:** [5.2.0] **Platform:** Web (React)

**Description:** I have integrated the Zoom Meeting SDK into a React application. The meeting container is nested inside a parent `div` that has custom padding/margin.

**The Issue:** The SDK is not respecting the boundaries of the parent container when rendering video streams. When a user plays/views a video, the SDK calculates the video canvas position starting from the **edge of the full screen (viewport)** rather than the **edge of the parent container**. This causes the video to be misaligned or “shifted” by the amount of padding/margin applied to the outer layout.

**Steps to Reproduce:**

1. Create a parent `div` with `padding: 50px` or a sidebar that pushes the content.

2. Initialize the Zoom SDK inside a child `div` (the `meetingSDKElement`).

3. Start a meeting and turn on the camera.

4. Observe that the video canvas is offset and does not stay centered within the designated child `div`.

**Expected Behavior:** The video canvas should calculate its coordinates relative to the `meetingSDKElement` or its immediate parent container.

---

<div class="post-metadata">

**Author:** ![amanda-recallai](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/amanda-recallai/32/44747_2.png) [@amanda-recallai](https://devforum.zoom.us/u/amanda-recallai)\
**Post date:** [January 14, 2026, 1:38am UTC](https://devforum.zoom.us/t/video-positioning-offset-in-meeting-sdk-react-when-using-nested-containers/140430/2 "2026-01-14T01:38:06Z")

</div>

Hi @Hackmac, this usually happens if you’re using the [Client View as it is designed to take up the whole page](https://stackoverflow.com/questions/77717563/how-to-append-zmmtg-root-inside-meetingsdkelement-dom#answer-77720571), so its video UI gets positioned relative to the viewport instead of your padded parent container.

If you need the SDK to respect a nested container, switch to [Component View (designed to be appended in a given HTML element)](https://stackoverflow.com/questions/77717563/how-to-append-zmmtg-root-inside-meetingsdkelement-dom#answer-77720571) and [pass your `meetingSDKElement` via `zoomAppRoot`](https://developers.zoom.us/docs/meeting-sdk/web/component-view/import-sdk/).

If you’re already on Component View, make the `zoomAppRoot` element a zero-padding wrapper (apply padding to a sibling/wrapper instead) and use the [Component View positioning APIs](https://developers.zoom.us/docs/meeting-sdk/web/component-view/positioning/) so coordinates stay anchored to your intended layout.