react-native webview embed youtube video doesn't have fullscreen options in Android

Question

I am trying to embed youtube videos in my react-native app, it is working fine but I am unable to get fullscreen button/ functionality for those videos. Here is my code:

 <WebView
  source={{uri: "https://www.youtube.com/embed/VaC9CivyV7I?version=3&enablejsapi=1&rel=0&autoplay=1&showinfo=0&controls=1&modestbranding=0"}}
style={{height:240, width:width, justifyContent:'center', alignItems:'center', backgroundColor:'black'}}
 />

I even tried using iframe as an html with allowfullscren="true", but I didn't get any success.

Edit

After some more search I come across this document for Full screen support, and come to know that I need to implement onShowCustomView and onHideCustomView within webView.setWebChromeClient, I dig little bit in my app's node_modules folder and found out ReactWebViewManager.java at location *"../node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java".

It seems that may need to add some custom code webView.setWebChromeClient, but as I am not that good in native programming, hence not being able to proceed further.

what about adding a com.google.android.youtube.player.YouTubePlayerView insted of adding a web view ? — Charuක, Nov 28 '16 at 13:20
so I need to add that com.google.android.youtube.player.YouTubePlayerView somewhere in my native code — Manjeet Singh, Nov 28 '16 at 13:27
you can add a view in your xml and work with that if you want and simply make it match parent for full view — Charuක, Nov 28 '16 at 13:30
I was never able to run youtube video in fullscreen mode, but other video worked well with react-native-video — Manjeet Singh, Oct 11 '17 at 19:35
Thanks for your response. Could you clarify what you mean by "other video" that worked well? — Robo-Rin, Oct 11 '17 at 19:59
I mean those url that directly point to mp4 or other formats — Manjeet Singh, Oct 11 '17 at 20:05
you should try https://github.com/teamairship/react-native-android-fullscreen-webview-video — Phuong Dao, Oct 15 '18 at 03:39
Note: `allowfullscren` is a misspelling anyway. It presumably should be `allowfullscreen`. — halfer, Jan 23 '20 at 08:57

score 2 · Answer 1 · answered Nov 28 '19 at 06:23

2

The WebView component accepts an allowsFullscreenVideo prop. When this prop is true, the fullscreen icon will become active.

See https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#allowsfullscreenvideo.

answered Nov 28 '19 at 06:23

Chris Parton

1,052
9
16

score 0 · Answer 2 · edited Jan 23 '20 at 08:54

0

I even tried using iframe as an html with allowfullscren="true", but I didn't get any success.

You have to embed your video in an iframe with property.

allowfullscreen="allowfullscreen"

Give iFrame the above mentioned property and for your information allowfullscreen="true" is a wrong input.

edited Jan 23 '20 at 08:54

halfer

19,824
17
99
186

answered Jan 15 '20 at 12:40

Alex

538
3
18

react-native webview embed youtube video doesn't have fullscreen options in Android

Edit

2 Answers2

Linked