Zoom meeting sdk - sizing not working

[Eric9 (Eric)]

Environment:

• Zoom Web SDK v2.18.2 (latest stable)
• React 18.3.1 with TypeScript
• Vite build system
• Tailwind CSS for styling
• Component View implementation (not Embedded View)

Issue: The Zoom Web SDK is alwayes rendered the smallest size. Component consistently renders much smaller than expected within a responsive grid layout, despite using recommended container patterns. The video area appears compressed and doesn’t utilize available screen space effectively.

Current Implementation:

Parent Layout (Meeting.tsx):

// 90% screen height allocated to main content
<div className="flex-1 grid grid-cols-[4fr_1fr] gap-3 p-3">
  {/* Zoom container gets 4/5 of the width */}
  <div id="zoomContainer" className="relative w-full h-full">
    <div className="w-full h-full">
      <ZoomMeeting
        meetingNumber={meetingData.meeting_id}
        meetingPassword={meetingPassword}
        userName={user.email || 'Guest'}
        role={isHost ? 1 : 0}
        onMeetingEnd={handleMeetingEnd}
        onMeetingJoined={handleMeetingJoined}
      />
    </div>
  </div>
  
  {/* Sidebar gets 1/5 of the width */}
  <div className="overflow-y-auto">
    <BANTChecklist />
  </div>
</div>

Zoom Meeting Wrapper (ZoomMeeting.tsx):

return (
  <div className="h-full w-full flex flex-col">
    {/* Zoom SDK container - fills entire space */}
    <div className="flex-1 flex items-center justify-center" id="ZoomEmbeddedApp">
      <ZoomComponentView
        meetingNumber={meetingNumber}
        meetingPassword={meetingPassword}
        userName={userName}
        role={role}
        onMeetingJoined={handleMeetingJoined}
        onMeetingError={handleMeetingError}
        onMeetingLeft={handleMeetingLeft}
      />
    </div>
  </div>
);

Zoom Component Implementation (ZoomComponentView.tsx):

return (
  <>
    <ZoomLoadingOverlay {...loadingProps} />

    {/* Zoom SDK container - responsive with aspect ratio */}
    <div className="w-full h-full">
      <div 
        id="meetingSDKElement"
        ref={containerRef}
        className="w-full h-full aspect-video"
      />
    </div>
  </>
);

Problem Description:

1. Small Rendering: Despite allocating 80% width and 90% height to the Zoom container, the actual video component renders at approximately 300x200px
2. Aspect Ratio Constraint: Using aspect-video (16:9) maintains proper ratio but seems to constrain overall size
3. Parent Height Issues: The container hierarchy may not be providing stable dimensions for SDK initialization
4. Responsive Behavior: Component doesn’t scale appropriately with viewport changes

What I’ve Tried:

• Verified SDK initialization occurs after stable container dimensions
• Used flex-1 and w-full h-full throughout the chain
• Ensured no conflicting CSS constraints
• Tested with explicit pixel dimensions (works but not responsive)
• Confirmed SDK loads successfully and meeting joins properly

Specific Questions:

1. Container Sizing: What’s the recommended approach for ensuring the SDK container receives accurate parent dimensions during initialization? Should we use ResizeObserver or similar?
2. Aspect Ratio vs Size: How can we maintain 16:9 ratio while allowing the component to grow larger? Is aspect-video conflicting with available space utilization?
3. CSS Grid Compatibility: Are there known issues with CSS Grid layouts and the Component View? Should we use flexbox exclusively?
4. Dynamic Resizing: The SDK documentation mentions resizing capabilities since v2.2.0 - should we be calling specific resize methods when parent containers change?

Expected Behavior: The Zoom component should fill most of the allocated 4fr grid column space (roughly 1200x675px on a 1920x1080 screen) while maintaining 16:9 aspect ratio.

Actual Behavior: Component renders at approximately 300x200px regardless of available parent space.

Repository: [GitHub link will be provided]

Additional Context:

• Manual drag-to-resize works correctly when users interact with the component
• Other UI elements (sidebar, headers) scale properly with the same CSS patterns
• Issue persists across different browsers (Chrome, Firefox, Safari)
• Meeting functionality works perfectly - this is purely a sizing/layout issue

Has anyone successfully implemented Component View in a complex React layout with proper responsive sizing? Any guidance on debugging container dimension inheritance would be greatly appreciated.

Screenshots: