# renderVideo for single user taking all spaces inside the canvas

**URL:** <https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302>\
**Category:** Web\
**Tags:** video-sdk\
**Created:** [April 25, 2023, 8:20am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302 "2023-04-25T08:20:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adrii](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/adrii/32/46920_2.png) [@Adrii](https://devforum.zoom.us/u/Adrii)\
**Post date:** [April 25, 2023, 8:20am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/1 "2023-04-25T08:20:35Z")

</div>

**Description**  
I created a canvas where I can displayed 9 users (3 lines of 3 users).  
I don’t know if I did something wrong but even if I set coordinates correctly and if I have only one user : it takes all the canva’s space…

I saw a lot of example apps, I didn’t find any strange things in my code.

**Browser Console Error**  
No error in console

**Which Web Video SDK version?**  
1.7.0

**Video SDK Code Snippets**  
I’m using SolidJS.  
I need to display 9 users (3 lines of 3 users) in the same grid.  
I created a canvas slot system with hard corded coordinates that I attribute to each joined user.

My canvas :

```auto
  <canvas
          ref={participantElement}
          id="participant-videos-canvas"
          height="1080"
          width="1920"
        ></canvas>

```

CSS :

```auto
canvas {
  width: 100%;
  height: auto;
}

```

If i did just one time this :

```auto
await stream.renderVideo(
          participantElement,
          userId,
          640,
          360,
          0,
          0, 
          VideoQuality.Video_360P
        );

```

The rendered video takes up all the space when I want it to just take up 640x360. If try with another coordinates, the problem persists.

Did I misunderstand something ?

**Screenshots**

 ![Capture d’écran 2023-04-25 à 10.10.50](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/f/e/fe4cbbe81b1d2d089bb3a89f9a4d67db38ebc59d.jpeg)

**Device (please complete the following information):**

- Device: Macbook Pro 16" M2 Pro
- OS: MacOS 13.3.1
- Browser: Chrome
- Browser Version : 112.0.5615.137 (official build) (arm64)

---

<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 25, 2023, 10:14pm UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/2 "2023-04-25T22:14:31Z")

</div>

Hi, @Adrii ,

Welcome and thank you for posting in the Zoom Developer Forum. When you say the rendered video takes up all the space, are you trying to have the videos side-by-side, is that accurate?

---

<div class="post-metadata">

**Author:** ![Adrii](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/adrii/32/46920_2.png) [@Adrii](https://devforum.zoom.us/u/Adrii)\
**Post date:** [April 26, 2023, 8:06am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/3 "2023-04-26T08:06:46Z")

</div>

Hi Donte,

Pictures speak louder than words 🙂

The goal is to have this :

 ![Capture d’écran 2023-04-26 à 10.02.12](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/4/64256daa454d1392e012080ed4c15b711b45242c.png)

If I have only one connected participant (except myself), I want this :

 ![Capture d’écran 2023-04-26 à 10.05.36](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/7/17a35868dd935ab16fa90799300f5262fa661df7.png)

But, I have this…

 ![Capture d’écran 2023-04-26 à 10.06.26](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/3/b37ef5ba62199120e670ab02d058ddfbcc94ecd2.png)

As I said in my question, even if I set coordinates / width / height correctly (with renderVideo), “user 1” take the entire canvas. Is it normal ?

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 27, 2023, 2:49am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/4 "2023-04-27T02:49:05Z")

</div>

Hey @Adrii

Thanks for your feedback.

Did you enable `SharedArrayBuffer` on your site?  
[https://developers.zoom.us/docs/video-sdk/web/browser-support/#notes](https://developers.zoom.us/docs/video-sdk/web/browser-support/#notes)  
[https://developers.zoom.us/docs/video-sdk/web/gallery-view/](https://developers.zoom.us/docs/video-sdk/web/gallery-view/)

If not, only up to a maximum of 4 video streams can be rendered on the same canvas, but it required the explicit option `enforceMultipleVideos` when calling the `client.init` method. Otherwise, the stream will cover the entire canvas.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![Adrii](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/adrii/32/46920_2.png) [@Adrii](https://devforum.zoom.us/u/Adrii)\
**Post date:** [April 27, 2023, 6:26am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/5 "2023-04-27T06:26:25Z")

</div>

Hello Vic,

Thank you for you answer !

I was sure it was enabled… but not. Thank you very much, sorry for this silly question…

Have a nice day !

---

<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:** [May 1, 2023, 10:53am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/8 "2023-05-01T10:53:17Z")

</div>

@Adrii,

Happy to hear you got it sorted out! I am linking our support documentation on [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) for reference.

## [Implementing Cross-Origin Isolation](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/#implementing-cross-origin-isolation)

 ![Screenshot 2023-05-01 at 6.52.04 AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/8/1/8179f4e82ef9c34e1d987d0e5a62f7b95cdc12f8.png)

Should you have any additional questions, please let us know.

---

<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:** [May 1, 2023, 10:55am UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/9 "2023-05-01T10:55:22Z")

</div>

Welcome to the Zoom Developer Forum. Can you elaborate on what you mean by setting the canvas accurately on mobile? Please share a screenshot of what you are seeing and an example of what you would like to achieve for our reference. This will help diagnose what may be happening.

---

<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 31, 2023, 8:55pm UTC](https://devforum.zoom.us/t/rendervideo-for-single-user-taking-all-spaces-inside-the-canvas/87302/10 "2023-05-31T20:55:30Z")

</div>

Closed on May 31, 2023, 8:55pm UTC

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