# Video rendered in incorrect position

**URL:** <https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158>\
**Category:** Web\
**Created:** [September 9, 2021, 9:11am UTC](https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158 "2021-09-09T09:11:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nickuk](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nickuk/32/31345_2.png) [@nickuk](https://devforum.zoom.us/u/nickuk)\
**Post date:** [September 9, 2021, 9:11am UTC](https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158/1 "2021-09-09T09:11:06Z")

</div>

**Description**  
When using renderVideo, the height, width, x and y coordinates are completely ignored. The video just fills the entire canvas. I’ve made sure the canvas height and widths are set and also tried setting using updateVideoCanvasDimensions using the resize callback code, which I can confirm is definitely working.

The video does get rendered on the canvas, and is of correct proportions, with black bars at the top and bottom. I just can’t position it at all on the canvas or give it a size, it always goes 100% height and width of the canvas.

**UPDATE:** This is working in the latest version of Safari and Firefox  
**UPDATE 2:** This works on Safari and Firefox when using renderVideo to render your own video, but other people’s video goes full screen still.

This is also inside a React v17 application:

```auto
mediaStream.renderVideo(
        videoRef.current,
        state.activeSpeaker.id,
        240,
        135,
        200,
        200,
        VideoQuality.Video_720P
      );

```

My canvas size is 1682x1357, so plenty of space for the small video.

**Which Web Video SDK version?**  
@zoom1234/videosdk v1.1.3 and v1.1.4

**Device**  
macOS Big Sur  
Chrome v92

Thanks in advance!

---

<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:** [September 10, 2021, 2:42am UTC](https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158/2 "2021-09-10T02:42:37Z")

</div>

Hey @nickuk

Thanks for your feedback.

Does the issue reproduce on Chrome? Or only on Firefox and Safari? Have you applied the ShareArrayBuffer OT on your site? The VideoSDK provides an API called `stream.isSupportMultipleVideos` to check whether the platform supports rendering multiple videos. If not, the `stream.renderVideo` method will ignore the width,height,x,y parameters.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![nickuk](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nickuk/32/31345_2.png) [@nickuk](https://devforum.zoom.us/u/nickuk)\
**Post date:** [September 10, 2021, 9:44am UTC](https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158/3 "2021-09-10T09:44:52Z")

</div>

Thanks @vic.yang,

I’ve figured it out to be related to the Cross-Origin isolation 🙂

So, I know where I’m going now, but note that it looks as though multiple streams are only supported in Chromium based browsers. Is that correct to your knowledge?

I noticed that Google Meet uses video elements for each stream instead of drawing to canvas. Is there no way to do this with the Zoom Video SDK? I noticed share screen supports video and canvas but haven’t see anything about that for the video side.

What would be perfect is if you could add reference to [https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation](https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation) within the main Video SDKs documentation.

Also, maybe make reference to it on the Manage Video documentation of the Video Web SDK [https://marketplace.zoom.us/docs/sdk/video/web/essential/video](https://marketplace.zoom.us/docs/sdk/video/web/essential/video) as the example shown is writing to multiple canvas’.

Finally, if multiple streams is only supported in Chrome, it’d also be great if you could add that as a Browser Support item on the main page Web video SDK page.

Thanks again,

Nick

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 15, 2021, 10:13pm UTC](https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158/4 "2021-09-15T22:13:50Z")

</div>

Hey @nickuk ,

> [@nickuk](#):
>
> So, I know where I’m going now, but note that it looks as though multiple streams are only supported in Chromium based browsers. Is that correct to your knowledge?

Correct.

> [@nickuk](#):
>
> I noticed that Google Meet uses video elements for each stream instead of drawing to canvas. Is there no way to do this with the Zoom Video SDK? I noticed share screen supports video and canvas but haven’t see anything about that for the video side.

Not at this time.

> [@nickuk](#):
>
> Finally, if multiple streams is only supported in Chrome, it’d also be great if you could add that as a Browser Support item on the main page Web video SDK page.

Good idea, we will add that here: [https://marketplace.zoom.us/docs/sdk/video/web](https://marketplace.zoom.us/docs/sdk/video/web) 🙂 (DEVELOPERS-1824)

Thanks,  
Tommy

---

<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:** [October 16, 2021, 8:14am UTC](https://devforum.zoom.us/t/video-rendered-in-incorrect-position/57158/5 "2021-10-16T08:14:18Z")

</div>

Closed on October 16, 2021, 8:14am UTC

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