# Zoom Meeting Custom Ui

**URL:** <https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281>\
**Category:** Web\
**Created:** [July 31, 2019, 10:04am UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281 "2019-07-31T10:04:11Z")\
**Posts on this page:** 1\
**Showing post:** 20

<div class="post-metadata">

**Author:** ![New\_Theory](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/new_theory/32/2642_2.png) [@New\_Theory](https://devforum.zoom.us/u/New_Theory)\
**Post date:** [December 19, 2019, 12:35pm UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/20 "2019-12-19T12:35:51Z")

</div>

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;
}
```

---

_[View the full topic](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281)._