Zoom Meeting Custom Ui

Meeting SDK Web
20

This seems to be working for React:

const zoomMeeting = document.getElementById("zmmtg-root")

// onClick handlers:

 const turnItOn = (e) => {
    e.preventDefault()
    zoomMeeting.style.display = 'flex'
    zoomMeeting.style.height = '100%'
    zoomMeeting.style.width = '100%'
    zoomMeeting.style.position = 'fixed'
    zoomMeeting.style.zIndex = '1'
    zoomMeeting.style.backgroundColor = 'black'
  }

  const turnItOff = (e) => {
    e.preventDefault()
    zoomMeeting.style.display = 'none'
    zoomMeeting.style.height = '0px'
    zoomMeeting.style.width = '0px'
    zoomMeeting.style.position = 'relative'
    zoomMeeting.style.backgroundColor = 'black'
    zoomMeeting.style.zIndex = '1'
  }

And when the app loads, I set #zmmtg-root “flex: none”, so it doesn’t show on load.

One strange behavior I encountered was that in React/Create-React-App, when importing { ZoomMtg } from ‘@zoomus/websdk’ the Zoom inline styles knocked out vertical scrolling everywhere in my app. Fix was to explicitly set global scrolling:

 html {
  overflow: scroll;
}