[Android] Full screen videos don't fill the view

[ds8k]

Experiencing a problem where full screen videos on Android don't fill the view.

Steps to reproduce the behavior:

• Embed a YT video
• Begin playing and tap the full screen button
• Video and trackbar are stuck to the left side

Expected behavior

• Embed a YT video
• Begin playing and tap the full screen button
• Video fills the container width and is center
• Trackbar fills the container width

Screenshots

Smartphone (please complete the following information):

• Device: Google Pixel 6
• OS + version: Android 12
• react-native-youtube-iframe version: 2.1.2
• react-native-webview version: 11.14.0

Additional context It looks like the webview needs another render sometimes, as sometimes it shows up right, and rotating to landscape then back also fixes it. The video and trackbar appear to be respecting the original height of the video instead of expanding.

[LonelyCpp]

since the fullscreen mode is fully handled by the YouTube player, this can't be directly solved with this library alone. This is either some bug from the android's webview render or YouTube's iframe fullscreen code.

I found a this thread on rn-webview, where it suggests to change the user agent to get around this bug. https://github.com/react-native-webview/react-native-webview/issues/1444#issuecomment-936592936

Try setting the forceAndroidAutoplay prop to true or directly set a custom user agent string in webViewProps

[ds8k]

@LonelyCpp Yeah that was kind of my worry. I'll give that a shot, thank you!

[ds8k]

@LonelyCpp

directly set a custom user agent string in webViewProps

This fixed it! What a weird bug.

[JeffreyVanelderenACA]

Setting the user agent didn't fix it for me, but if anyone would like to find a way to disable full screen on Android, I dit it using the initialPlayerParams:

<YoutubeIframe
                                initialPlayerParams={{ preventFullScreen: Platform.OS === 'android' }}
 ...
/>