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

Meeting SDK Web
1

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.

2

Hi @Hackmac, this usually happens if you’re using the Client View as it is designed to take up the whole page, 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) and pass your meetingSDKElement via zoomAppRoot.

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 so coordinates stay anchored to your intended layout.