# How config Speaker View in SDK Video

**URL:** <https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253>\
**Category:** Web\
**Created:** [December 14, 2022, 1:36am UTC](https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253 "2022-12-14T01:36:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmanzano](https://avatars.discourse-cdn.com/v4/letter/b/ce7236/32.png) [@bmanzano](https://devforum.zoom.us/u/bmanzano)\
**Post date:** [December 14, 2022, 1:36am UTC](https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253/1 "2022-12-14T01:36:18Z")

</div>

How can I make the Speaker View in Zoom SDK Video on the Web, is there any configuration that needs to be done, or how can I hide the host or make it appear minimized when a second participant enters.

Can this view or a similar one be done in video SDK?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/a/ba907a70e46c0dfbb500f148f19841899b439a96.jpeg)

---

<div class="post-metadata">

**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\
**Post date:** [December 15, 2022, 12:35am UTC](https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253/2 "2022-12-15T00:35:07Z")

</div>

Hi @bmanzano ,  
Thanks for your post! You can achieve this view through some styling configurations. Please take a look at the react-demo of the [Video SDK web sample app](https://github.com/zoom/videosdk-web-sample) to see one way this can be achieved.

Thanks,  
Rehema

---

<div class="post-metadata">

**Author:** ![bmanzano](https://avatars.discourse-cdn.com/v4/letter/b/ce7236/32.png) [@bmanzano](https://devforum.zoom.us/u/bmanzano)\
**Post date:** [December 15, 2022, 1:53am UTC](https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253/3 "2022-12-15T01:53:54Z")

</div>

How can I apply the configurations, I already looked at [https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/](https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/) and it does not explain how to make those screen changes, since it only applies in SDK meeting and not in SDK Video, it always shows me all the participants in a grid as I show it in the following image, I would like the host to be displayed smaller so that the other participants can be seen in the center as shown in the image at the beginning of the post .

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/0/90a9997bcf3165f327a2bc82d5210fc13337f71e.png)

---

<div class="post-metadata">

**Author:** ![kellyjandrews](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kellyjandrews/32/51599_2.png) [@kellyjandrews](https://devforum.zoom.us/u/kellyjandrews)\
**Post date:** [December 16, 2022, 3:27pm UTC](https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253/4 "2022-12-16T15:27:15Z")

</div>

Hi Benigno - I think what you may be after is this part here - [https://developer.zoom.us/docs/sdk/video/web/essential/video/#render-participant-videos](https://developer.zoom.us/docs/sdk/video/web/essential/video/#render-participant-videos)

Specifically this bit -

```auto
stream.renderVideo(document.querySelector('#participants-canvas'), payload.userId, 960, 540, X_CORD, Y_CORD, 2)

```

You can specify the exact size and location of each video. Here is a 4x4 example - [https://developers.zoom.us/docs/sdk/video/web/essential/video/#example-4x4-gallery-view-layout](https://developers.zoom.us/docs/sdk/video/web/essential/video/#example-4x4-gallery-view-layout)

You would want to modify this section to get the results you are after.:

```auto
stream.renderVideo(document.querySelector('#participants-canvas'), participants[0].userId, 960, 540, 0, 540, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 2)

```

---

<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:** [January 16, 2023, 1:27am UTC](https://devforum.zoom.us/t/how-config-speaker-view-in-sdk-video/80253/5 "2023-01-16T01:27:53Z")

</div>

Closed on January 16, 2023, 1:27am UTC

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