How to trigger full-screen mode on play for embedded YouTube video in React Native WebView?

Question

I have a YouTube video embedded in a React Native WebView. I'm using the react-native-android-fullscreen-webview-video library for Android which works well in both portrait and landscape mode, but I need the video to default to fullscreen when the user presses play.

I've tried other libraries for this, including react-native-youtube, but each resulted in buggy playback either in portrait or landscape.

This is my code. Everything works well, I just need fullscreen play by default.

<WebView source={{ uri: videoUrl }} />

Solution 1

This is working fine for me

<WebView
 javaScriptEnabled={true}
 scrollEnabled={false}
 allowsFullscreenVideo={true}
 userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 
 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
 source={{uri: `https://www.youtube.com/embed/${videoID}?&autoplay=1&mute=1&showinfo=0&controls=1&fullscreen=1`}}
 style={styles.video}
/>

Solution 2

This library works

react-native-android-fullscreen-webview-video

import WebView from 'react-native-android-fullscreen-webview-video';
<WebView style={{flex:1, height: 300} source={{ uri: 'https://www.youtube.com/embed/GV0B6nGf9mcrel=0&autoplay=0&showinfo=0&controls=1&fullscreen=1' }}/>

Solution 3

Just use this code:

allowFullScreen: {true}

Comments

[bshook]

Thanks for the tip. Can you elaborate on how I might use iFrame properties to open to fullscreen when the user presses play?

[Tanveerbyn]

Here's the official documentation of iframe properties developers.google.com/youtube/player_parameters but i will suggest you tu use react-native-youtube for that that so easy to implement...

[bshook]

Thank you. I tried react-native-youtube but it was very buggy. Always autoplayed and the video didn't work correctly in portrait mode (because of a documented issue).

[bshook]

I read the documents thoroughly. This is what I'm referring to: github.com/inProgress-team/react-native-youtube#known-issues

[Tanveerbyn]

Which bugs and error are you facing tell me i have mamy example for this..

[bshook]

when using full-screen mode the video opens to landscape on Android as expected. But if the user returns the screen to portrait mode, the video plays in 1 second increments before pausing. We think something is blocking the view but can't determine what. Thanks for your help.

[bshook]

This ended up being the best option for me. Thank you!

[digit]

This library was outdated and used deprecated webview . Only support RN version lower than 0.60