# Video Ratio preview with virtual background

**URL:** <https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180>\
**Category:** Video SDK\
**Created:** [July 23, 2024, 3:22am UTC](https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180 "2024-07-23T03:22:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lmtruong1512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lmtruong1512/32/59233_2.png) [@lmtruong1512](https://devforum.zoom.us/u/lmtruong1512)\
**Post date:** [July 23, 2024, 3:22am UTC](https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180/1 "2024-07-23T03:22:50Z")

</div>

**Video SDK Type and Version**

VideoSDK: 1.11.10

**Description**

I created a canvas with a 16:9 ratio and then started a local video track with a virtual background. However, the video displayed in the canvas has a different ratio, resulting in black area around it. How can I fix this?

Here is my code:

```auto
  async startPreviewVideo(imageUrl) {
    try {
      if (imageUrl) {
        await this.localVideoTrack.start(document.querySelector("#preview-camera-canvas"), { imageUrl: imageUrl });
      } else {
        await this.localVideoTrack.start(document.querySelector("#preview-camera-video"));
      }
    } catch (error) {
      Logger.error('[JS] Start local preview video error', error);
      throw error;
    }
  }

```

![Screenshot 2024-07-23 at 10.23.34](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/a/caac600d70168ccb8a16b7b45c5b75ef6ba8dbfa.png)

---

<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:** [July 23, 2024, 9:02am UTC](https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180/2 "2024-07-23T09:02:50Z")

</div>

Hey @lmtruong1512

Thanks for your feedback.

In Video SDK Web, we provide the `cropped` option, could you try it again?

> **[LocalVideoTrack | Zoom Video SDK for Web - 1.11.10](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/LocalVideoTrack.html#start)**
>
> Documentation for Zoom Video SDK for Web - 1.11.10

Or would you like to share the session IDs with us for troubleshooting purposes?

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![lmtruong1512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lmtruong1512/32/59233_2.png) [@lmtruong1512](https://devforum.zoom.us/u/lmtruong1512)\
**Post date:** [July 24, 2024, 3:26am UTC](https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180/3 "2024-07-24T03:26:31Z")

</div>

@vic.yang Thank you for your reply.

I tried the `cropped` option, but it didn’t work. My session ID is `zyEbgY+8SZKrnRLdhUeocQ==`. Could you help me troubleshoot this?

---

<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:** [July 24, 2024, 6:11am UTC](https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180/4 "2024-07-24T06:11:06Z")

</div>

Hey @lmtruong1512

The issue of black bars might be related to the camera device.

We attempt to capture at a 16/9 aspect ratio, but not all cameras support it.

Could you share the camera model with us?

Alternatively, you can check if the resolution supports 1280x720 by going to `chrome://media-internals/` and looking under the Video Capture tab.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![lmtruong1512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lmtruong1512/32/59233_2.png) [@lmtruong1512](https://devforum.zoom.us/u/lmtruong1512)\
**Post date:** [July 24, 2024, 6:30am UTC](https://devforum.zoom.us/t/video-ratio-preview-with-virtual-background/114180/5 "2024-07-24T06:30:55Z")

</div>

@vic.yang

Thank you for your reply, this is my camera info, can you check it:

 ![Screenshot 2024-07-24 at 13.22.04](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/e/9e0a8612a94dea95715e8f3246908663e9a788d4.png)