Incorrect 16/9 aspect ratio on my videos and others

Video SDK Web
1

Description

My video and other participants’ videos are not rendering in the correct 16:9 aspect ratio.

  1. Start myself video:
      let videoOptions = {
        cameraId: cameraId,
        originalRatio: false
      };

      if (stream.isSupportVirtualBackground() && virtualBackground) {
        videoOptions.virtualBackground = { imageUrl: virtualBackground };
      }
      await stream.startVideo(videoOptions);

We disable originalRatio and optionally apply a virtual background. We also set the video_webrtc_mode and audio_webrtc_mode properties to 0 in the SDK JWT to force WebAssembly instead of WebRTC.

  1. Attach user videos:
  • With myself video, render using canvas:
await state.mediaStream.renderVideo(canvasElement, userId, canvasElement.width, canvasElement.height, 0, 0, quality)
  • With other video, render using video-player:
userVideoPlayer = await stream.attachVideo(userId, quality)

Which Web Video SDK version?
2.1.0

**Device **

  • OS: Windows
  • Browser: Edge

Additional context

This is my session IDs:
NWx6qkKHSKCr3tcOZebGvw==
In6WK8zUT5e/Rvqs/uFpiQ==
fTmscuiGQAG3kF2PI2PlDg==

1 Like
2

@lmtruong1512

Thanks for the details.

Before going further — are you using <video-player-container> as a shared container for all video players, or does each <video-player> render inside its own <video-player-container>? This helps clarify how styling should be applied.

The style will work perfectly when each <video-player> is wrapped inside its own <video-player-container>. This ensures the correct 16:9 aspect ratio is maintained for each participant’s video.

Here’s a React-compatible implementation using your custom tags, with dynamic id, node-id, and key values based on participant?.userId.

Screenshot 2025-05-19 at 6.34.02 PM
Screenshot 2025-05-19 at 6.34.02 PM1920×982 67.4 KB

CSS (VideoPlayer.css)

video-player-container {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.2%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

React Component

import './VideoPlayer.css';

function CustomVideoPlayer({ participant }) {
  const userId = participant?.userId;

  return (
    <video-player-container
      key={userId}
      id={`${userId}-video-player-container`}
    >
      <video-player node-id={userId} />
    </video-player-container>
  );
}

export default CustomVideoPlayer;

Let me know once this is applied and if the 16:9 rendering looks correct for each participant. Feel free to ask if anything is still not working.

Best regards,
Naeem Ahmed

2 Likes
3

@freelancer.nak Thank you for your response. Rendering each <video-player> inside its own <video-player-container> still results in an incorrect aspect ratio.

We found that adding the 'hd: stream.isSupportHDVideo()' option when calling startVideo causes the video to stream at an incorrect ratio (not 16:9). Removing this option seems to fix the issue.