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.
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
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
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.
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?
@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.
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 :
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.
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:
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:
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?
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.
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.
