Video SDK + UI Tool Kit on iPhone

Video SDK iOS
1

Current Implementation
We are currently developing a service that enables face-to-face interviews between two parties using a video SDK. For the user interface implementation, we are directly utilizing the UI Tool Kit provided by Zoom.

Display Issues
When viewing the interview screen on an iPhone in portrait orientation, only one toolbar button is visible, and the user’s own video feed does not appear. Switching to landscape orientation allows the user’s video to display and slightly more buttons to become visible.

Question
How can we adjust the layout to ensure both participants’ video feeds and additional functional buttons remain fully visible in portrait orientation?

2

Information:

iPhone: iPhone SE
iOS ver: 18.3.2
VideoSDK, UI toolkit ver :
“@zoom/videosdk”: “^2.1.5”,
“@zoom/videosdk-ui-toolkit”: “^2.1.0-1”,

3

Hi @user64

Have you tried v2.1.10-2? Here’s a screenshot of how it would look like on an iPhone SE. Tapping the screen unhides the toolbars.

Screenshot 2025-04-30 at 3.05.54 PM
Screenshot 2025-04-30 at 3.05.54 PM986×1502 82.7 KB

Can you share a screenshot of what you’re seeing instead?

1 Like
4

Hello [Ekaansh]

Sorry for the delayed response.
We are adjusting the size using calc() because displaying the UI Toolkit across the entire screen would exceed the screen height and result in poor usability.
The current UI is implemented as follows:

<Stack
  width="100%"
  height="100vh"
  flexDirection="column"
  justifyContent="center"
  alignItems="center"
  bgcolor="#000"
>
  <Box
    id="sessionContainer"
    sx={{
      width: 'calc(100vw - 460px)',
      backgroundColor: '#000',
    }}
  />
</Stack>

We are using MUI v6 as our UI framework.
The issue where component sizes become too small on smartphones is due to a problem with the calc() settings, but I’m wondering if it’s possible to display it to fit the screen width without adjusting the size at all?