Black bars appear on the sides of the screen, but only in Safari and Firefox

[sergey77 (Sergey)]

Hi @vic.yang,

Firefox (133): In your environment, the maximum number of video-player that can be accommodated in each video-player-container is 1. The current number has exceeded this limit, which may cause video rendering issues - #5 by vic.yang

Thanks for the update, this is really important for us.
A quick test shows that the update looks good. If we notice any issues during more detailed testing, I’ll make sure to report them to you.

At the moment, I’m concerned about a visual bug that appeared after updating Zoom Video SDK to version 2.1.5. I’d like to highlight that this issue has not been fixed in the latest version 2.1.10.
We’ve upgraded to version 2.1.10, but we’re still experiencing the issue. Specifically, black bars appear on the sides of the screen, but only in Safari and Firefox when using:

localVideoTrack = ZoomVideo.createLocalVideoTrack(videoDevices[0].deviceId)
localVideoTrack.start(videoRef.current))

    <video-player-container>
         <video-player ref={videoRef}/>
     </video-player-container>

Interestingly, this issue does not occur in Chrome, where the local-preview-video correctly fits the full width of the container.

For now, I’ve applied a temporary spike in our code to fix this.
For Chrome, I’m using the recommended approach from the documentation:

    video-player-container {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
    }

    video-player {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        aspect-ratio: 16/9;
        background: black;
    }


    <video-player-container>
        <video-player ref={videoRef}/>
    </video-player-container>

But for other browsers, I use the HTML <video> tag for the local preview video, which allows to fix the issue using CSS styles:

  video {
        min-height: 100%;
        min-width: 100%;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

<video
      muted={true}
      ref={videoRef}
      playsInline
/>

Here, we can see that the canvas fits the full width of the container, but the video stream is broadcast with black bars on the sides:

---

SharedArrayBuffer is disabled
Zoom Video SDK: 2.1.10
React: 17.0.2

[alexm (Alex Maisey MVP)]

Have your participant change their meeting video aspect ratio to “scale to fit” and see if that makes a difference.

[vic.yang (Vic)]

Hi @sergey77

Thanks for your feedback.

This may be related to the default video capture parameters on different browsers. On Chrome, the aspect ratio is 16/9, while on Firefox and Safari, it’s 4/3.

When you set the aspect-ratio of the video-player to 16/9, on platforms that capture in 4/3, there will be blank space. The black borders you’re seeing are actually the background:black style effect.

Thanks
Vic

[sergey77 (Sergey)]

Hi @vic.yang ,
Thank you for your support.

Am I getting right that it’s currently impossible to set capture in 16:9 for Firefox and Safari?
Can we use object-fit: cover for the video-player on the Zoom Video SDK side?

If this can’t be resolved, then my temporary solution using the HTML <video> tag seems to be the right approach.

Also, this issue occurs not only in local-preview-video but also in live-video. However, since we use a slightly different layout for live-video, it does not have a significant negative impact.

We would greatly appreciate it if a solution for this issue could be included in future releases of the Zoom Video SDK

[alexm (Alex Maisey MVP)]

In your config, try setting:

video: {
  enable: true;
  originalRatio: false;
}

Referencing: videosdk-ui-toolkit-web/index.d.ts at b57b74244e096b91ae7560dd06cdf6e970f58db5 · zoom/videosdk-ui-toolkit-web · GitHub

[vic.yang (Vic)]

Hi @sergey77

Thanks for sharing the information with us.

Can we use object-fit: cover for the video-player on the Zoom Video SDK side?

Currently, it’s not possible. In the local preview case, unlike the <video> tag, the video-player is just a placeholder <div>, so it cannot achieve the object-fit: cover effect.

my temporary solution using the HTML <video> tag seems to be the right approach.

Yes. It’s the right approach.

Thanks
Vic