# Customize Embedded Zoom with Component View in 2.2.0

**URL:** <https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233>\
**Category:** Web\
**Created:** [February 12, 2022, 5:50pm UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233 "2022-02-12T17:50:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rahim.bait.2021](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rahim.bait.2021/32/33905_2.png) [@rahim.bait.2021](https://devforum.zoom.us/u/rahim.bait.2021)\
**Post date:** [February 12, 2022, 5:50pm UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/1 "2022-02-12T17:50:45Z")

</div>

How can i resize and fix the returned zoom component in my react component view?

```
      import ZoomMtgEmbedded from '@zoomus/websdk/embedded';
      const client = ZoomMtgEmbedded.createClient();
      ...
      let meetingSDKElement = document.getElementById('meetingSDKElement');
      client.init({
        debug: true,
        zoomAppRoot: meetingSDKElement,
        language: 'en-US',
        customize: {
            meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
            toolbar: {
                buttons: [
                    {
                        text: 'Custom Button',
                        className: 'CustomButton',
                        onClick: () => {
                            console.log('custom button');
                        }
                    }
                ]
            }
        }
    });

    client.join({
        apiKey: apiKey,
        signature: signature,
        meetingNumber: meetingNumber,
        password: passWord,
        userName: userName,
        userEmail: userEmail,
        tk: registrantToken,
    });

```

all i want is to display meetingSDKElement in a specific location with specific height and width

---

<div class="post-metadata">

**Author:** ![development3](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/development3/32/35591_2.png) [@development3](https://devforum.zoom.us/u/development3)\
**Post date:** [March 2, 2022, 8:47pm UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/2 "2022-03-02T20:47:50Z")

</div>

I’ve tried too but with no success, were you able to figure out how to change the size?

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [March 10, 2022, 11:25am UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/3 "2022-03-10T11:25:34Z")

</div>

@rahim.bait.2021,

Welcome to the Developer Forum. For your concern, please see our Positioning components help documentation and this post linked below:

[https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/positioning/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/positioning/)

> [@Meeting/Webinar js web SDK - Component view position doc](https://devforum.zoom.us/t/meeting-webinar-js-web-sdk-component-view-position-doc/63920/3):
>
> Hello, same problem here. I cannot set size, or fill my div. I can change Speaker/Ribbon/Gallery view, but can’t control size of views. I can control position, and disable draggable, but thats all. Is it possible to change sizes (min/max width and height for eg.) and colors?

Best,  
Donte

---

<div class="post-metadata">

**Author:** ![rahim.bait.2021](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rahim.bait.2021/32/33905_2.png) [@rahim.bait.2021](https://devforum.zoom.us/u/rahim.bait.2021)\
**Post date:** [March 10, 2022, 1:07pm UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/4 "2022-03-10T13:07:37Z")

</div>

i had this answer but i did’t test it

> <https://stackoverflow.com/questions/71094576/customize-embedded-zoom-meeting-sdk-with-component-view-in-2-2-0/71314228#71314228>

---

<div class="post-metadata">

**Author:** ![development3](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/development3/32/35591_2.png) [@development3](https://devforum.zoom.us/u/development3)\
**Post date:** [March 10, 2022, 7:04pm UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/5 "2022-03-10T19:04:09Z")

</div>

I’ve tried that but didn’t work too

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [April 4, 2022, 11:57pm UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/6 "2022-04-04T23:57:44Z")

</div>

@development3 and @rahim.bait.2021,

I checked internally and it was shared that the size of the specific video view can’t be easily changed post init, but it is something that is on our roadmap [ZOOM-357826]. Note, in the `init()` function’s `customize` property, you can configure resizing for the video container. Here is our support guide on this :

## Programmatically resizing the video component

[https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/resizing](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/resizing)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [May 5, 2022, 9:57am UTC](https://devforum.zoom.us/t/customize-embedded-zoom-with-component-view-in-2-2-0/64233/7 "2022-05-05T09:57:59Z")

</div>

Closed on May 5, 2022, 9:57am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.