Responsive video gets cut off when using full screen API on parent element

[marcelgruber]

I have a situation where I have the player wrapped in a parent div that the user can toggle full screen on, as in, not by using the fullscreen button in the player itself. This is so that other elements can be included in fullscreen mode. The lib I'm using for this is https://www.npmjs.com/package/react-full-screen.

The problem is that the aspect ratio doesn't get updated correctly which results in the video getting cut off on large screens.

It looks to be because of the padding-top on the iframe wrapper div.

[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.

[third774]

The <Stream /> element supports the className prop, which will allow styling both the containing element and the <iframe /> within (via CSS selector).

Which element did you have in mind that the style prop would be forwarded to?