Aspect ratio question

Video SDK
1

Format Your New Topic as Follows:

Video SDK Type and Version
Web, 2.1

Hi,

I would like to format the videos of the participants in circles. Works well, but the aspect ratios of the 2 videos in my example (see the screenshot at the end) is different. The bigger circle is the video from my iMac, the small from my iPad.
May I use some fancy CSS commands to get the video of the iPad to fill the entire circle?

Bildschirmfoto 2025-01-21 um 10.11.47
Bildschirmfoto 2025-01-21 um 10.11.471280×744 33.6 KB

2

Hi @hanwel you can set the sdk to capture the original ratio of the video by setting originalRatio option to true.

Your video ratios can also be edited within the css styling of the video elements returned from attachVideo()

3

Thanks, @Ticorrian.

like this?

let userVideo = await mediaStream.attachVideo(event.userId, VideoQuality.Video_720P)
const containerElement = document.querySelector(`#${container}`);
if (containerElement && userVideo instanceof HTMLElement) {
	containerElement.appendChild(userVideo);
	userVideo.style.width = '125%';
	userVideo.style.transform = 'translateX(-10%)';
	userVideo.style.aspectRatio = '16 / 9';
}

That makes no difference.

4

even
userVideo.style.scale = '2';
scales only the video that is coming from my Mac, the video from the iPhone remains the same.

5

Hi @hanwel my apologies for getting back to you so late. I did some testing on mobile browsers and it and the SDK auto adjusts the video dimensions based on it being in portrait or landscape mode. This behavior is also reflected in the desktop client where the portrait video ratio is kept instead stretched from side to side. I have word from engineering we are making improvements to the sdk to automatically adjust the video to 16:9, regardless of what the browser is capturing in to save the logic and CSS overhead. I dont have an ETA at the moment for this release.