3

Using expo-av to create a video, I am trying to target the created video with css. I want to make the video height:100% of the container. But I don't know how to access the actual video, only the container. How can I target the child video of the container that is created using the Video object from expo-av (which is strikingly similar to react-native-video)?

The code looks like this.

 <Video
   style={styles.video}
   ref={videoRef}
   source={post.media}
   resizeMode="cover" /* this actually does affect the video css but does not affect 
                      the height */
   onPlaybackStatusUpdate={status => setStatus(() => status)}
 />

const styles = StyleSheet.create({
  video: {
    width:200,
    height:200,
    objectFit:'cover'
  }
})

But the (abbreviated) code that is generated in the web view looks like this.

<div style="height:200px;width:200px;object-fit:cover">
  <video style="object-fit:cover" src=[..videosrc]></video>
</div>

Notice the video itself's css is not targeted.

EDIT

This actually solves the short-term issue of making the video 100% of its outer container but does not solve the long-term issue of learning how to add styles to the video itself. The main reason for figuring out how to to target the child css is that there may be other styles to add to the video specifically in the future, not just height. Any ideas are greatly appreciated.

const styles = StyleSheet.create({
  video: {
    width:200,
    height:200,
    objectFit:'cover',
    display: 'flex',
    align-items: 'flex-end'
  }
})
Starfs
  • 412
  • 1
  • 5
  • 18

0 Answers0