Top of pageSkip to main content

Resizing


Meeting SDK Web component view version 2.3.0 and higher has resizing capabilities. End users can resize the video component and Developers can resize it on init. You can also disable resizing.

On this page

Programmatically resizing the video component

In the client.init() function's customize property, you can configure resizing for the video container. The width and height apply to the HTML Canvas element (the container) the videos are rendered in, not necessarily the videos themselves.

The two sizing objects are default and ribbon.

  • default applies to speaker view and gallery view.
  • ribbon applies to the vertical ribbon view.

For example, the sample code below shows how you can make gallery view and speaker view 1000px wide and 600px high, ribbon view 300px wide and 700px high, and allow the user to resize with the dragger on the bottom right corner:

let meetingSDKElement = document.getElementById('meetingSDKElement')

client.init({
  zoomAppRoot: meetingSDKElement,
  language: 'en-US',
  customize: {
    video: {
      isResizable: true,
      viewSizes: {
        default: {
          width: 1000,
          height: 600
        },
        ribbon: {
          width: 300,
          height: 700
        }
      }
    }
  }
})

Minimum and maximum sizes

Dragging to resize has minimum and maximum values. It is possible to set a custom width and height outside these values, but it is not recommended.

ViewMinimumMaximum
SpeakerWidth 240px, Height 135pxWidth 1440px, Height 810px
GalleryWidth 720px, Height 411pxWidth 1440px, Height 720px
RibbonWidth 240px, Height 135px multiplied by the number of participants (up to 5 videos with pagination)Width 316px, Height 720px (up to 5 videos with pagination)

Resizing examples with visuals

See below for examples.

Speaker view

Dragging to resize is not locked to a 16/9 aspect ratio.

Meeting SDK Web component view speaker view

In this example, the width and height has been set to 1000px by 600px.

Dragging to resize is not locked to a 16/9 aspect ratio.

Video layout logic: Gallery view renders up to 25 videos. Depending on the width and height, the layout can adjust to render the videos as large as possible.

Meeting SDK Web component view gallery view

In this example, the width and height has been set to 1000px by 600px.

Ribbon view

Dragging to resize is locked to a 16/9 aspect ratio.

Video layout logic: Ribbon view defaults to 4 videos. If the height is 684px or higher, it will add a 5th video. Ribbon view can render up to 9 videos if the custom height is large enough.

Meeting SDK Web component view ribbon view

In this example, the width and height has been set to 300px by 700px.

For more information, see the Meeting SDK Web component view reference.

Next Steps

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.