After exiting fullscreen, the video remains in the "expanded" size about react-native-youtube-iframe HOT 10 OPEN

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` }}
/>

from react-native-youtube-iframe.

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

from react-native-youtube-iframe.

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

from react-native-youtube-iframe.

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.

from react-native-youtube-iframe.

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?

from react-native-youtube-iframe.

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?

from react-native-youtube-iframe.

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

from react-native-youtube-iframe.

Im experimenting the same bug

from react-native-youtube-iframe.

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.

from react-native-youtube-iframe.

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

from react-native-youtube-iframe.