Summary

Initially reported in #20199 with a "fix" given in #20199 (comment), which isn't really a fix but a workaround, but more importantly, it's undocumented.

In fact, the official example from the docs has this issue.

Workaround

One must use the videoStyle prop (yay, it was added, which is nice) and use it to:

• set position to relative, but only on Web, because if you do this for Android/iOS, it will break the video and it won't display.
• set exact width and heights (which isn't very responsive)

Resolution

At minimum the docs could be updated to clarify more and explain how to do this the right way. I use:

videoStyle={Platform.OS === 'web' ? { position: 'relative' } : undefined}

...because it retains all the properties of the container (responsiveness etc).

In the long term, a fix to standardize the implementation could be found?

What platform(s) does this occur on?

Web

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: Windows 10 10.0.22621
    Binaries:
      Node: 16.19.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
      Yarn: 3.4.1 - ~\scoop\apps\nvm\current\nodejs\nodejs\yarn.CMD
      npm: 8.19.3 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
    npmPackages:
      @expo/webpack-config: ^0.17.4 => 0.17.4
      expo: ^47.0.13 => 47.0.13
      react: 18.1.0 => 18.1.0
      react-dom: 18.1.0 => 18.1.0
      react-native: 0.70.5 => 0.70.5
      react-native-web: ~0.18.12 => 0.18.12
    Expo Workflow: managed

Minimal reproducible example

https://snack.expo.dev/@derk-jan/video