Skip to main content

​
ResizeMode

Defines how video content is resized to fit within the player view. 
type ResizeMode = 'contain' | 'cover' | 'stretch' | 'none';

​
Values

​
contain
string
Scale the video uniformly (maintain aspect ratio) so that it fits entirely within the view. This is the default mode.The entire video will be visible, but there may be letterboxing (black bars on top/bottom or left/right) if the video’s aspect ratio doesn’t match the view.Use case: When you want to ensure the entire video is visible without cropping.
​
cover
string
Scale the video uniformly (maintain aspect ratio) so that it fills the entire view.The video may be cropped if its aspect ratio doesn’t match the view. This ensures no letterboxing, but parts of the video may not be visible.Use case: When you want to fill the entire player area without letterboxing, and cropping is acceptable.
​
stretch
string
Scale the video to fill the entire view without maintaining the aspect ratio.The video will be stretched or squashed to fit the view dimensions exactly. This can result in distortion.Use case: Rarely recommended, but useful when you need the video to exactly match the view dimensions regardless of distortion.
​
none
string
Do not resize the video. Falls back to default behavior (typically ‘contain’).Use case: When you want the native platform’s default scaling behavior.

​
Visual Examples

​
Contain Mode

┌─────────────────────┐
│                     │ ← Black bars (letterbox)
│  ┌───────────────┐  │
│  │               │  │
│  │     Video     │  │ ← Entire video visible
│  │               │  │
│  └───────────────┘  │
│                     │ ← Black bars (letterbox)
└─────────────────────┘

​
Cover Mode

┌─────────────────────┐
┃                     ┃
┃                     ┃ ← Video fills entire view
┃       Video         ┃ ← Top/bottom may be cropped
┃                     ┃
┃                     ┃
└─────────────────────┘

​
Stretch Mode

┌─────────────────────┐
│                     │
│                     │ ← Video stretched to fit
│       Video         │ ← May appear distorted
│                     │
│                     │
└─────────────────────┘

​
Usage

​
Setting Resize Mode

import { VideoPlayer } from 'react-native-video';
import { Video } from 'react-native-video';

const player = VideoPlayer.create({
  uri: 'https://example.com/video.mp4'
});

<Video
  player={player}
  resizeMode="cover"
  style={{ width: '100%', height: 300 }}
/>

​
Dynamic Resize Mode

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { Video, VideoPlayer, ResizeMode } from 'react-native-video';

const VideoPlayerComponent = () => {
  const [resizeMode, setResizeMode] = useState<ResizeMode>('contain');
  
  const player = VideoPlayer.create({
    uri: 'https://example.com/video.mp4'
  });

  return (
    <View>
      <Video
        player={player}
        resizeMode={resizeMode}
        style={{ width: '100%', height: 300 }}
      />
      
      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
        <Button title="Contain" onPress={() => setResizeMode('contain')} />
        <Button title="Cover" onPress={() => setResizeMode('cover')} />
        <Button title="Stretch" onPress={() => setResizeMode('stretch')} />
      </View>
    </View>
  );
};

​
Best Practices

​
Contain (Default)

Best for:
  • Educational or tutorial videos where all content must be visible
  • Videos with important text or graphics near the edges
  • When maintaining original aspect ratio is critical
<Video
  player={player}
  resizeMode="contain"  // Default
  style={{ width: '100%', height: 300 }}
/>

​
Cover

Best for:
  • Background videos
  • Full-screen immersive experiences
  • Social media style feeds where cropping is acceptable
  • When you want to avoid letterboxing
<Video
  player={player}
  resizeMode="cover"
  style={{ width: '100%', height: '100%' }}
/>

​
Stretch

Best for:
  • Very specific use cases where exact view dimensions are required
  • Generally not recommended due to distortion
<Video
  player={player}
  resizeMode="stretch"
  style={{ width: 400, height: 300 }}
/>

​
Aspect Ratio Considerations

Common video aspect ratios:
  • 16:9 - Standard widescreen (1920x1080, 1280x720)
  • 9:16 - Vertical video (1080x1920, 720x1280)
  • 4:3 - Traditional TV (640x480)
  • 1:1 - Square (1080x1080)
  • 21:9 - Ultra-widescreen (2560x1080)

​
Matching View to Video Aspect Ratio

import { Video, VideoPlayer } from 'react-native-video';
import { View, Dimensions } from 'react-native';

const screenWidth = Dimensions.get('window').width;

// For 16:9 video
const video16x9Height = screenWidth * (9 / 16);

<Video
  player={player}
  resizeMode="contain"
  style={{
    width: screenWidth,
    height: video16x9Height
  }}
/>

// For 9:16 vertical video
const video9x16Width = 300;
const video9x16Height = video9x16Width * (16 / 9);

<Video
  player={player}
  resizeMode="contain"
  style={{
    width: video9x16Width,
    height: video9x16Height
  }}
/>

​
Platform Support

Resize modes are supported on all platforms:
  • Android ✓
  • iOS ✓
  • visionOS ✓
  • tvOS ✓

Build docs developers (and LLMs) love

Get started for freeTalk to us