Add support for forcing portrait (vertical) video orientation in ParticipantView

[mdbep]

Which package/packages do you use?

• @stream-io/video-react-sdk
• @stream-io/video-react-native-sdk
• @stream-io/video-client

Hi team 👋

I’ve been working with the Video React SDK and the ParticipantView component, but I haven’t found any way to force or lock the video layout into portrait (vertical) orientation.

I went through the documentation
and examples, but couldn’t find any prop, style option, or configuration that allows controlling or fixing the video aspect ratio or orientation.

It would be really useful to have an option or prop like:

or something similar, especially for mobile-first or vertical video web applications (not React Native).

Right now, my workaround is to override the default styles using custom CSS, but it would be great if this could be achieved more cleanly via a built-in prop or configuration option.

Thanks a lot for the awesome SDK! 🙌

[oliverlaz]

Hi @mdbep, our SDK will follow the aspect ratio/orientation of the original source.
This means that landscape videos will always be rendered in landscape mode and vice versa. We do this to ensure that all areas of the incoming video stream remain visible. Otherwise, we risk cropping some parts of the video.

Would you like to override this behavior and force 9/16 regardless of the original aspect ratio?

[mdbep]

Yes, exactly @oliverlaz — I’d like to be able to force the video into portrait (or any desired aspect ratio) regardless of the original source.

I’m developing a web app for online medical consultations (doctor–patient). In most cases, the patient joins from a mobile device, so a vertical (portrait) layout makes much more sense for the experience.

Right now, I’m achieving this by overriding the default CSS, but that’s not the most elegant or reliable solution.

I just wanted to know if you’d consider this as a potential new feature for the SDK, or if it’s something that could be supported in a future release.

Thanks again for the quick responses and support!

[oliverlaz]

@mdbep, you can force this with CSS override, as you've discovered; it should be fairly simple.
Although this works, the patient might get poor UX in case the doctor isn't in the "crop" area, and becomes invisible.
Is this something you've considered as a risk?