Resize Embedded Zoom with Component View in 2.0.1

Description
I am working on a branded meeting application that integrates with the Embedded Zoom app (Component View) in 2.0.1. I’m using React + Material UI for my application. I would like to resize the embedded Zoom app so that it fits the entire right hand panel.

I have seen examples in the forum for CSS and version < 2.0. However, I have not seen anything with the 2.0.1 Component View. Is it possible to control the CSS with 2.0.1 Component View? If so, please provide some examples.

Thanks!

Hey @qwong,

Thank you for reaching out to the Zoom Developer Forum. If you want to resize that element, you would effectively apply styles to the div where you’ve attached that element. In our example, you would be styling #meetingSDKElemenent

I hope that helps! Let me know if you have any questions.

Thanks,
Max

Hi, i have a same problem. i don’t control to CSS with 2.0.1 in component. need justify in the box border
but it does not let me modify the size and neither leave this fixedphoto

Hey @Ucchristus,

Are you able to share the CSS rules that you’re using for this? Any code examples should be helpful here.

Thanks,
Max

Even by applying styles in the page itself and using !important this does not work when applied to the element

Hey @rockwellw,

Please share how you are adding these rules to the SDK as well as the rules that you’re using. I’ll work to reproduce the issue and offer any tips that I can.

Thanks,
Max

hey @MaxM
Will this code work?
I have also tried meetingSDKElement.style.width = "1000px";

#meetingSDKElement{
width: 1000px;
height: 500px;
}

but no luck, can you suggest me how to get view option so that user can change the view and can also make component full screen

hey @MaxM , after integrating , I am only getting options for two types of views, I am not getting gallery view button. Can anyone help me here?

@rtitvilasi

It looks like that ID would apply to the div itself. In the case of the sample app, the ID is actually #ZoomEmbeddedApp. When testing with that ID, I saw that I could change the #ZoomEmbeddedApp > #zoom-sdk-video-canvas and the related elements inside to change the size of the window.

However, I’m thinking there is some flexbox tricks that we could use here but I’ll need to check with our team. Trying to set the flex property didn’t yield any results.

Can you send a screenshot of what you’re seeing? What browser is this with?

Max

@MaxM Thanks for the reply, Actually my real concern was gallery view option was not coming on using component sdk but after using Cross-Origin Isolation , Everything worked perfectly . But as far as i know that this will be a temporary fix, Can you please tell us that will their be any permanent fix in future ? or correct me about Cross-Origin Isolation if i am wrong.

Hi, @rtitvilasi,

Thank you for your questions and glad to hear after using Cross-Origin Isolation, everything worked perfectly. For your concern, see the Delaying the Desktop Chrome change section in the SharedArrayBuffer Chrome Developer blog post for more details. I’ve also linked our Cross-Origin Isolation help documentation for reference:

You can also stay up to date on the evolving browser policies in web development here :

Let me know if this helps.

Best,
Donte

Hey @donte.S and @MaxM

Thanks for the suggestions. I am facing one issue with Cross origin isolation. The headers are working perfectly in local server but when i deploy it on my server which has HTTPS protocol than the isolation don’t work and i am not able to use Shared Array Buffer because of which i am getting problem on having gallery view in my production server. Can i get any help with this.

Hi, @rtitvilasi ,

It looks like a fix was released in Web Meeting SDK 2.1.1. You can check out the release notes here.

Screen Shot 2021-12-15 at 3.24.57 PM

Can you try upgrading to v2.1.1 and see if the behavior persists?

Thanks,
Donte

hi @donte.S ,

I tried updating the web sdk to v2.1.1 but still the other two view i.e Ribbon View and Gallery View is not showing up

@rtitvilasi ,

Can you share a screenshot of your terminal to verify that Cross-Origin Isolation changes were applied to your site, enter the following in your browser console:

typeof SharedArrayBuffer ==='function'

If the value is true, it’s correct.

Best,
Donte

I am also unable to get the embedded meeting to resize at all no matter what styling I apply. Here is a screenshot showing the meeting size, the container size, and the console showing the element:

How can I style this so that the meeting takes up the full screen or the container it is in?

hello @donte.S ,

typeof SharedArrayBuffer ==='function'

Value of above is false because i have removed the Cross-origin header after the update 2.1.1 . Correct me if i am wrong, that was the point of update so that we don’t have to use coop and coep.

If you say that COOP and COEP headers are necessary than also these headers code are working on my localhost but when i deploy my code to production server with protocol HTTPS than again typeof SharedArrayBuffer ==='function' this started showing false. Can you help me with this?

@rtitvilasi,

Are you serving the sample app over HTTPS when testing? if not, please make sure to sever your site over HTTPS and ensure you’ve allowed your browser access to the microphone and camera. To enable a locally running server under this limitation, you can use a tool like ngrok.

https://ngrok.com/

Ngrok allows you to tunnel traffic to your server running on localhost through an HTTPS domain. Let me know if this helps.

Best,
Donte

would you like to share CSS files, so every one here can see the exact problem. It will be easy to understand what actually you want.

Hey @activeoperate,

Thanks for your input here. I agree that CSS examples would help here. From there, we should be able to offer further advice. Likewise, our team is working to add OOTB customization to the SDK in the near future.

Thanks,
Max