Video not covering the whole screen

Question

I want my video to cover the entire screen but it seems to cover only half of the screen as follows

I have styled the video component as follows:

 <Video
                source={{uri: this.state.video}}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  alignItems: 'stretch',
                  bottom: 0,
                  right: 0,
                  height: Dimensions.get('window').width,
                }}
                resizeMode="cover"
                repeat={true}
              />

Could anyone tell me how to achieve this behavior and where am I going wrong? Any help would be useful.

Why is height set as width value? `height: Dimensions.get('window').width,` — Pranjal Gore, Sep 04 '20 at 11:21

score 0 · Accepted Answer · answered Sep 04 '20 at 12:11

Somehow giving a height has solved the mentioned issue like follows:

  <Video
                source={{uri: this.state.video}}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  alignItems: 'stretch',
                  bottom: 0,
                  right: 0,
                  height: "90%",
                }}
                resizeMode="cover"
                repeat={true}
          
              />

Video not covering the whole screen

1 Answers1