# Change video orientation on react-web and android sdk **URL:** \ **Category:** Video SDK\ **Created:** [January 2, 2024, 3:54pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056 "2024-01-02T15:54:54Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 2, 2024, 3:54pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/1 "2024-01-02T15:54:54Z")
I have deployed the zoom video sdk samples on both android and react-web apps. The video preview on the react-web app is showing in portrait. But the remote side video on the android (Which is sent from react-web version) is showing in landscape. I would like to see the video in full screen on android device. **How To Reproduce** _Steps to reproduce the behavior including:_ \*1. Use the zoom video sdk sample apps on android and react-web app on 2 different phones and be in the same session. \*2. Observe the self video on the react-web version, it is in portait. But the remote side video on the android version is in landscape. Expected Result: The remote side video on the android app side must be in portrait and in full screen. ---
**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\ **Post date:** [January 3, 2024, 12:07pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/2 "2024-01-03T12:07:47Z")
Hi Balaji, you can change how the video is rendered on Android modifying the `aspect` parameter passed to your `VideoView`. I understand you’d like to crop the landscape video coming from Web to portrait layout on Android. You can use the `ZoomVideoSDKVideoAspect_PanAndScan` aspect to crop the video to fit your layout. Here’s a Kotlin snippet: ```kt val videoView: ZoomVideoSDKVideoView = findViewById(R.id.video_view) canvas.subscribe(videoView, ZoomVideoSDKVideoAspect.ZoomVideoSDKVideoAspect_PanAndScan) ``` Let me know if that answers your question. 🙂 ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 3, 2024, 5:36pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/3 "2024-01-03T17:36:18Z")
> [@ekaansh.zoom](#): > > `ZoomVideoSDKVideoAspect_PanAndScan` First of all, thanks for the response and wish you a happy new year. I tried the solution you mentioned. and it is showing a much more zoomed version of the video on android side compared to the preview shown on the react version. Attaching the screenshots. The above one is from react-web version. Please check the preview version of it. The below one is from Android where the remote side view is zoomed significantly around 5x. ![WhatsApp (3)](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c.jpeg) ![WhatsApp Image Jan 3](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/6/46c513dfdacc6d00db91cefcb99bf7dd1606eb77.jpeg) ---
**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\ **Post date:** [January 4, 2024, 11:12am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/4 "2024-01-04T11:12:47Z")
Happy new year! There’s a couple ways to render the video, `ZoomVideoSDKVideoAspect_PanAndScan` crops the video to fit the view, if you’d like to render the video in the portrait view but not zoom in you’ll encounter black borders in your view (letterboxing). To achieve that you can use the `ZoomVideoSDKVideoAspect_LetterBox` aspect parameter. Alternatively, you can stretch the video to fill the view. Here’s a quick reference: | Type | Description | | --- | --- | | `ZoomVideoSDKVideoAspect_Original` | Display video without any modifications. | | `ZoomVideoSDKVideoAspect_Full_Filled` | Stretches video to fill the canvas. | | `ZoomVideoSDKVideoAspect_LetterBox` | For video with a 16:9 aspect ratio shown on a 4:3 screen, black bars will be added to the top & bottom to fit the canvas For video with a 4:3 aspect ratio shown on a 16:9 screen, black bars will be added to the left and right to fit the canvas. | | `ZoomVideoSDKVideoAspect_PanAndScan` | For video with a 16:9 aspect ratio shown on a 4:3 screen, the left & right will be cropped to fit the canvas For video with a 4:3 aspect ratio shown on a 16:9 screen, the top & bottom will be cropped to fit the canvas. | You can read more in the [docs](https://developers.zoom.us/docs/video-sdk/android/video/#create-a-video-view). ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 7, 2024, 1:05pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/5 "2024-01-07T13:05:15Z")
Thanks for your reply… when i used the LetterBox resolution, Here is what i am seeing. There is significant amount of cropping done for the view on android when compared to what the user is able to see in the preview of react-web session. I am assuming the preview side of the caller must be the exact area shown in the remote side. It is working from android to react-web version perfectly. what i see in the preview on android side is exactly shown on the remote side of react-web. But not vice versa. ![Chrome](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238.jpeg) ![No subject Jan 7 Screenshot from balaji](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427.jpeg) ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 8, 2024, 8:23am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/6 "2024-01-08T08:23:09Z")
If I stretch the video, the aspect ratio will break I believe… Please correct me if I am wrong… I believe the video captured on the react-web itself is in landscape resolution. Hence it is coming as the landscape video and when it is centre cropped, it is zoomed a lot to fit in full screen… Can I change the size of the video on the capturing side itself.? on react-web version? ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 10, 2024, 1:41pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/7 "2024-01-10T13:41:27Z")
Hi @ekaansh.zoom. Gentle reminder on the queries i added. ---
**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\ **Post date:** [January 11, 2024, 2:40pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/8 "2024-01-11T14:40:57Z")
> [@balajisunku](#): > > If I stretch the video, the aspect ratio will break I believe… Please correct me if I am wrong… > I believe the video captured on the react-web itself is in landscape resolution. Hence it is coming as the landscape video and when it is centre cropped, it is zoomed a lot to fit in full screen… > Can I change the size of the video on the capturing side itself.? on react-web version? In Video SDK **Web** the video will be cropped into a 16/9 ratio by default, if you want to use the original ratio, pass the [`originalRatio`](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#originalRatio) when invoking the `startVideo` method. You can also pass in custom values for [captureWidth](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureWidth) and [captureHeight](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureHeight) to set it to a specific resolution. ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 14, 2024, 6:15pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/9 "2024-01-14T18:15:30Z")
> [@ekaansh.zoom](#): > > [`originalRatio`](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#originalRatio) If i pass ‘originalRatio’ as the parameter, i am seeing the landscape video on android view. Even though if the size of the video depends on the device orientation on react-web side, the device is in portrait orientation only and also the preview on react is being shown in portrait orientation. it is weird to see the same as the landscape video on android side. ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 16, 2024, 7:00am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/10 "2024-01-16T07:00:47Z")
> [@ekaansh.zoom](#): > > In Video SDK **Web** the video will be cropped into a 16/9 ratio by default @ekaansh.zoom Hello, You mentioned that " In Video SDK **Web** the video will be cropped into a 16/9 ratio by default" … Can i change it to 9/16? i think that will solve my problem. please confirm where can i change it. ---
**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\ **Post date:** [January 16, 2024, 8:19am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/11 "2024-01-16T08:19:19Z")
> You can also pass in custom values for [captureWidth](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureWidth) and [captureHeight](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureHeight) to set it to a specific resolution. Like I mentioned you can call `startVideo` with capture parameters with custom values, for example to capture vertical 480p video: ```js await mediaStream.startVideo({ captureHeight: 640, captureWidth: 480 }); ``` ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [January 17, 2024, 2:56am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/12 "2024-01-17T02:56:36Z")
Hey @balajisunku When using the `stream.startVideo()` method, you can pass the `originalRatio` option to capture the original aspect ratio. On the receiving side, if the rendered aspect ratio is different from the original ratio, you will receive a `video-aspect-ratio-change` event. This event provides the original capture ratio from the sender, allowing you to adjust the rendering style accordingly. > **[CaptureVideoOption | Zoom Video SDK for Web - 1.10.5](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html)** > > Documentation for Zoom Video SDK for Web - 1.10.5 > **[Zoom Video SDK for Web - 1.10.5](https://marketplacefront.zoom.us/sdk/custom/web/modules.html#event_video_aspect_ratio_change)** > > Documentation for Zoom Video SDK for Web - 1.10.5 Thanks Vic ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [January 23, 2024, 12:54pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/13 "2024-01-23T12:54:35Z")
Hi @vic.yang … thank you so much for your response. I am changing my code from await mediaStream?.startVideo({ videoElement }); const startVideoOptions = { hd: true, ptz: mediaStream?.isBrowserSupportPTZ() }; To await mediaStream?.startVideo({ videoElement, captureWidth: 360, captureHeight: 640 }); const startVideoOptions = { hd: true, ptz: mediaStream?.isBrowserSupportPTZ(), captureWidth: 360, captureHeight: 640 }; Where i reversed the resolution from 640x360 which is default to 360x640… Still i am seeing the remote side video in landscape mode as shown in the above screenshots. Since i am hardcoding these to single values, I believe i need not to handle the change in resolution event… am i correct? ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [January 24, 2024, 2:06am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/14 "2024-01-24T02:06:17Z")
Hey @balajisunku Have you tried the `originalRatio` option when calling the `stream.startVideo` method? And have you listened to the `video-aspect-ratio-change` event on the rendering side? Thanks Vic ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [February 11, 2024, 5:34pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/15 "2024-02-11T17:34:41Z")
@vic.yang I had tried listening to the event you mentioned. But couldn’t figureout how to do that. If possible, can you please give me the sender side changes in react-web and receiver side code in android? Thanks in advance. it will be a great addon to my product if I can achieve this 🙂 ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [February 12, 2024, 1:03pm UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/16 "2024-02-12T13:03:53Z")
@ekaansh.zoom @vic.yang I am getting emails from other developers also who are waiting for the same resolution. The help from you resolves the problem for many products 🙂 Please help ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [February 15, 2024, 5:44am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/17 "2024-02-15T05:44:29Z")
Hey @balajisunku We will soon update this usage method on the sample app on GitHub. > **[GitHub - zoom/videosdk-web-sample: Zoom Video SDK web sample](https://github.com/zoom/videosdk-web-sample/)** > > Zoom Video SDK web sample. Contribute to zoom/videosdk-web-sample development by creating an account on GitHub. Thanks Vic ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [February 15, 2024, 8:46am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/18 "2024-02-15T08:46:20Z")
@vic.yang that would be a great add-on to the sample app. But meanwhile, can you please guide me to fix it in my product? I am about to release my product to the production and this has become a blocker for me. I would be happy to connect on a call to discuss as well. Please feel free to mail me on [balaji.march31@gmail.com](mailto:balaji.march31@gmail.com) for a faster communication ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [February 19, 2024, 2:59am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/19 "2024-02-19T02:59:24Z")
Hey @balajisunku Sorry for late reply. Here is a simple example I wrote based on your scenario: ```javascript /** * On Android browser, sending the video */ // Start video. Starting from 1.10.5, you no longer need to worry about whether to pass the videoElement await stream.startVideo({ originalRatio: true }); // Render self view const targetElement = stream.isRenderSelfViewWithVideoElement() ? document.querySelector("#self-video") : document.querySelector("#self-canvas"); await stream.renderVideo( targetElement, currentUserId, width, height, x, y, videoQuality ); /** * On Desktop browser, receiving the video */ client.on("peer-video-state-change", (payload) => { const { action, userId } = payload; if (action === "Start") { await stream.renderVideo( document.querySelector("#participants-canvas"), userId, width, height, x, y, videoQuality ); } else if (action === "Stop") { await stream.stopRenderVideo( document.querySelector("#participants-canvas"), userId ); } }); /** * Listen to the aspect ratio change event */ client.on("video-aspect-ratio-change", (payload) => { const { userId, aspectRatio } = payload; const height = width / aspectRatio; // resize the video await stream.adjustRenderedVideoPosition( document.querySelector("#participants-canvas"), userId, width, height, x, y ); }); ``` Thanks Vic ---
**Author:** ![balajisunku](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/32/53380_2.png) [@balajisunku](https://devforum.zoom.us/u/balajisunku)\ **Post date:** [March 8, 2024, 5:54am UTC](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/20 "2024-03-08T05:54:24Z")
Hi @vic.yang . I would like to quickly re-iterate that my local view and remove view are fine on the react-web app. But my remote view on the android version is cropped to show only the landscape portion as shown in the below screenshot. ![No subject Jan 7 Screenshot from balaji](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427.jpeg) Should I still need the react-web changes you mentioned above? or I should change in android side? [Next page](https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056.md?page=2)