Responsive video gets cut off when using full screen API on parent element about stream-react

[marcelgruber]

I'm trying to see what I can do with the onResize event, but I haven't yet figured out how to trigger it:

onResize={(e) => {
  // only gets called on initial page load
  console.log('resized')
}}

[third774]

You can disable the padding-top by passing responsive={false} in on the <Stream /> component. This disables all styling that we apply so you're free to apply whatever styles you'd like!

Lemme know if this resolves the issue you're running into!

[marcelgruber]

Thanks @third774

Just started experimenting with that... Will post an update once I get it.

Is it expected for the onResize event to never fire?

[marcelgruber]

Got the fix for the aspect ratio. Only missing part is vertical centering.

<div
  style={{
    position: 'relative',
    paddingTop: '56.25%',
    maxHeight: 'calc(100vh)',
  }}
>
  <div
    style={{
      position: 'absolute',
      top: '0px',
      left: '0px',
      maxHeight: 'calc(100vh)',
      pointerEvents: 'auto',
      width: '100%',
      height: '100%',
    }}
  >
    <Stream
      responsive={false}
      width="100%"
      height="100%"
      style={{
        width: '100%',
        height: '100%',
        overflow: 'hidden',
      }}
      muted
      streamRef={videoRef}
      controls
      src="5d5bc37ffcf54c9b82e996823bffbb81"
    />
  </div>
</div>

[marcelgruber]

Also, would it be feasible to get a style prop added to the <Stream> component? Else TS builds fail.