Zoom Meeting Custom Ui

When I integrated the Zoom in ReactJS, it attached to body. Is there anyway to set zoom into a div.

1 Like

Hey @khanh.nguyen,

Yes there is a way to put the Meeting UI into a div.

The Zoom Meeting UI is not atcually attached to the body. The css makes it seem that way because of the following styles:

#zmmtg-root {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
}

The Zoom Meeting UI will be rendered in the tag with the zmmtg-root id. You can place this anywhere in your project. You can also customize the css classes that are generated as well.

<div id="zmmtg-root"></div>

Let me know if this helps!

Thanks,
Tommy

2 Likes

Hey Tommy,

Thanks for you answer,
We already apply your suggest, it worked but I still have some concerns:

  1. I develop our application by React. When I integrated zoom, it had 3 cameras when I opened zoom (1 my big camera, 1 my small camera and 1 my partner camera). Can you please to guide me how to disable my big camera?
    Here is my capture
  2. I would like to know how to customize camera size based on their parent html element (div size…)

Thank a lot,
Ninh

Hey @ninhkhong,

Happy to help!

  1. Can you clarify? You have 2 external cameras plugged into your computer? What do you mean by big camera, small camera, and partner camera? I am guessing partner camera is video of participant who joined meeting?

To re position the floating self view camera screen you can use this css,

.suspension-window {
   transform: translate(-444px, 10px) !important;
}
  1. To customize the size of the video / Zoom Web UI use the following css (feel free to customize width / height sizing)
#zmmtg-root, .meeting-client, .meeting-client-inner {
  width: 1000px;
  height: 500px;
  position: relative;
}

#wc-footer {
  bottom: auto !important;
  width: 1000px !important;
}

#dialog-join {
  width: 1000px !important;
}

#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
  height: 500px !important;
  width: 1000px !important;
}

.suspension-window {
  transform: translate(-444px, 10px) !important;
}

#dialog-invite {
  display: none;
}

Here is what that sizing looks like

Let me know if this helps!

Thanks,
Tommy

1 Like

Thanks for your help @tommy

Khanh

1 Like

You are welcome! Let us know if you have any other questions!

-Tommy

This may also help, using the iFrame method.

-Tommy

Hi everyone, i facing the same issue - i have Reactjs app, and i want to integrate zoom meeting to one of my pages (React component), but SDK put <div id="zmmtg-root"></div> into <body> tag and i can’t figure out how to get it work inside my component. I have already try to put <div id="zmmtg-root"></div> in my React Component but it does’t work.

Hey @osulzhenko,

Can you provide steps to reproduce, or a Github repo?

What is not working? Is there an error message?

Thanks,
Tommy

Hi @tommy , thank you for quick response

i find out the source of my issue, i was initialising
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
in js code, but instead i need to put this in componentDidMount() hook of my React component.

1 Like

Hey @osulzhenko,

I am glad you found the issue, thanks for posting the solution!

-Tommy