How to resize video without changing it's aspect ratio?

Question

  constructor(props) {
    super(props);
    this.state = {
        screenWidth: Dimensions.get('window').width,
        heightScaled: null,
    };  
  }   

<View style={styles.videoView}>
       <Video 
          source={video}
          ref={(ref) => { this.player = ref }}  
          repeat={true}
          resizeMode={"contain"}
          style={{
              width: this.state.screenWidth,
              height: this.state.heightScaled,
           }}
          onLoad={response => {
                const { width, height } = response.naturalSize;
                const heightScaled = height * (this.state.screenWidth / width);

                response.naturalSize.orientation = "horizontal";
                this.setState({ heightScaled: heightScaled });
          }}
       />
</View>

styles

videoView: {
  flex: 1,
  width: Dimensions.get('window').width,
  height: 350
}

I'm fetching video from api and then using it in a video component using react-native-video. I don't know how I can resize my video to fit in a view without stretching the video.

Here is the result of the above code.

I don't want my video to cross the red line I marked in the image. Please help me. I'm stuck on this problem from the past 3 days.

have to tried to wrap your video component in View and giving width and height to it ? — warl0ck, Jan 30 '19 at 06:23
Maybe do what @warl0ck suggested and use `posterResizeMode` or `resizeMode` prop, with the value of "cover" https://www.npmjs.com/package/react-native-video#posterresizemode https://www.npmjs.com/package/react-native-video#resizemode — zb22, Jan 31 '19 at 06:43
check if `View` doesn't exceed the red line even without the Video component, to be sure it's not `View` problem — zb22, Jan 31 '19 at 07:01
@zb22 do you know how to crop a video in React Native? I tried it with `react-native-video-processing` but unable to do it — Shubham Bisht, Jan 31 '19 at 07:59

score 3 · Answer 1 · answered Dec 01 '20 at 08:09

3

Adding one more <View /> inside the parent <View /> containing <Video /> will solve the overflow of the video.

<View style={styles.videoView}>
  <Video
    resizeMode={"contain"}
    style={{
      flex: 1
    }}
  />
  <View style={{flex: 1}}>
     {/* Components after red line can be rendered here */}
  </View>
</View>

answered Dec 01 '20 at 08:09

Dev

98
9

resizeMode option "cover" fixed my problem resizeMode="cover" "contain" mode put the small width video in center..its also useful but my problem is solved with resizeMode="cover" – Muhammad Abdullah Apr 18 '22 at 08:13

How to resize video without changing it's aspect ratio?

1 Answers1