After exiting fullscreen, the video remains in the "expanded" size

[bpark93]

Describe the bug
After I exit out of fullscreen in landscape mode, the youtube video retains the "landscape fullscreen" size. The app also freezes, and all parts of the app except the video becomes untouchable. Even in portrait mode, after exiting fullscreen, the play/pause button is no longer there, and other UI buttons can be seen to be increased in size.

To Reproduce
Exit out of fullscreen in both portrait mode and landscape mode.

Expected behavior
The video should revert back to its original size when exiting fullscreen.

Screenshots
https://streamable.com/y9238r
https://streamable.com/xmxjev

Smartphone (please complete the following information):

• Device: Reproduced in Android emulator: pixel 2, Physical phones: Oneplus 6, iPhone 8
• OS + version:
• react-native-youtube-iframe version : "^1.2.4"
• react-native-webview version: "8.1.1"
• Expo verison [if using expo]: "~37.0.3"

Additional context
When reproducing the bug on landscape mode, I get a Warning message from expo: "State updates from the useState() and useReducer() Hooks don't support the second callback...". I can't even expand the warning as it also becomes unresponsive to touch.

Code

import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {
    const playerRef = useRef(null);
    const [playing, setPlaying] = useState(true);
    const width = useWindowDimensions().width
    const height = width*9/16;

    return (
        <YoutubePlayer
                ref={playerRef}
                height={height}
                width={width}
                videoId={id.video}
                play={playing}
                volume={50}
                playbackRate={1}
                playerParams={{
                    cc_lang_pref: "us",
                    showClosedCaptions: false,
                }}
        />
    )
}

[LonelyCpp]

Hi @bpark93 Sorry for the slow response.

I tried it with this env, and am not able to reproduce it :(

"expo": "~37.0.3",
"react-native-webview": "8.1.1",
"react-native-youtube-iframe": "^1.2.4"

I also tried it on ios.

Are you using the player on a modal or any sort of overlay component?
There is a known bug in react-native-webview right now, where fullscreen mode from a modal is buggy (for android only, iOS works good) link to issue

Can you try just a plain webview like and see what happens on fullscreen? The results should be identical for sanity's sake

<WebView 
  mediaPlaybackRequiresUserAction={true} 
  style={{ height: 240, width: 320, alignSelf: "center", alignContent: "center", }} 
  source={{ uri: `https://www.youtube.com/embed/${props.videoKey}?rel=0` }}
/>

[LonelyCpp]

Here's another issue that might help you can you try the orientation fix that is mentioned?

[Foukz]

I have a similar issue. After switching fullscreen on and off the icons size remains the same as it was when fullscreen was on. But after some tests, it looks like this issue might be connected with the 16:9 aspect ratio of YoutubePlayer width and height.

For example, when width is 320 and height is 180 or width is 480 and height is 270 the bug with strange icons size occurs but when width is 325 and height is 180 the error is gone.

So maybe this is the thing that we need to pay attention to

[bpark93]

For example, when width is 320 and height is 180 or width is 480 and height is 270 the bug with strange icons size occurs but when width is 325 and height is 180 the error is gone.

This fixes the video size issue for me too, but the app still freezes and the warning still pops up.

Hi @LonelyCpp , the video isn't on any overlay component. I'll try the other solution you posted.

[bpark93]

So this is definitely some sort of screen orientation issue. I can reproduce thr exact same error using the expo video component.

I'm really curious as to how you can't reproduce the error at all on your end. Does your demo app have "orientation":"portrait" in app.json? Are you using expo-screen orientation at all?

[LonelyCpp]

Does your demo app have "orientation":"portrait" in app.json?

Yes

1. I tried it with the expo app from the playstore.
2. Tried it with plain old react native app with orientation locked to portrait and unlocked (in AndroidManifest.xml)
3. It seems like one can only build expo apps on expo servers 🤔 Let me try that too, just in case.

But all this is on an android 10 device. What android OS are you using?

[LonelyCpp]

@Foukz I can reproduce your bug with the specific width and height numbers. I am honestly perplexed, I'll see what I can find

[esteban199]

Im experimenting the same bug

[bpark93]

This issue has been fixed for me after a combination of @Razorholt 's fix in @LonelyCpp's second comment, using the onFullScreenChange prop from the fs-callback branch, and updating expo to 38. No more freezing, no more wacky video dimensions.

Use the onFullScreenChange prop to call a function that locks orientation and adjust video dimensions accordingly whenever entering/exiting fullscreen.

[fawazahmed-yara]

Keep a watch on fullscreen status, update width on change so that iframe readjusts the size.

onFullScreenChange = (fullscreenStatus) => {
  this.setState({ fullscreenStatus })
}

<YoutubePlayer
  onFullScreenChange={this.onFullScreenChange}
  width={this.state.fullscreenStatus ? 0 : videoWidth}
 // ...other props
/>

works great