How to fill containers without letter‑/pillar‑boxing?

Video SDK Web
1

SDK / stack: Zoom Video SDK Web v2.1.10 (WebRTC) in a Next.js 15 app.

My goal is to make each participant’s video completely fill whatever container we give it (no black bars), even when the container’s aspect ratio ≠ 16 : 9. Ideally this would work the same way object-fit: cover; works on a normal <video> tag.

Is this possible with purely CSS on the <video-player> or <video-player-container> element? or will a custom “scaling” function be needed?

Has anyone already solved this and would share code or best practices?

@vic.yang

image
image720×459 90.8 KB

2

Hey @nventurino

Thanks for your feedback.

Is this possible with purely CSS on the <video-player> or <video-player-container> element? or will a custom “scaling” function be needed?

Currently, it may not be possible, because the receiving side does not know the actual aspect ratio of the sender when setting the video-player style. However, this can be handled by using the video-aspect-ratio-change event. You can refer to this documentation.

Thanks
Vic

1 Like
3

ok thank you. I’ll give it a try