0

The reason I want todo this is so I can open up a Embeded youtube video in Full screen. At the moment, if I click on the Webview it opens up the youtube video into the native IOS video player. This is what I want.

However, I need to be able todo this programatically without the client clicking it. Why? The user clicks on an image inside a image gallery (image only - no video), so I close the gallery, and this is when I want to open the WebView (programatically trigger a click on it) in full screen (note: when clicking on webview, it opens the youtube video into the player straight away).

Is this even possible?

There are other ways around this which would involve changing the UI/UX, I'd want to try avoid this (if possible).

James111
  • 15,378
  • 15
  • 78
  • 121

2 Answers2

0

If you want to use react-native app to view youtube video in full screen, use below code:

$ npm install react-native-youtube -S
$ react-native link


<YouTube
  videoId="KVZ-P-ZI6W4"   // The YouTube video ID
  play={true}             // control playback of video with true/false
  fullscreen={true}       // control whether the video should play in fullscreen or inline
  loop={true}             // control whether the video should loop when ended

  onReady={e => this.setState({ isReady: true })}
  onChangeState={e => this.setState({ status: e.state })}
  onChangeQuality={e => this.setState({ quality: e.quality })}
  onError={e => this.setState({ error: e.error })}

  style={{ alignSelf: 'stretch', height: 300 }}
/>

Refer to this link for more details.

enter image description here

David
  • 15,894
  • 22
  • 55
  • 66
  • Doesn't this require cocoapods? – James111 Mar 15 '18 at 04:00
  • if you run 'react-native link', everything is set for you. – David Mar 15 '18 at 04:02
  • I ran react-native link & when I render the component, this is what I get: https://www.dropbox.com/s/psdc6a33bfg7aqv/Screenshot%202018-03-15%2015.56.05.png?dl=0 - A red line. All I get rendered is an unimplemented view: https://www.dropbox.com/s/gtw6c9dngzasci5/Screenshot%202018-03-15%2016.00.17.png?dl=0 - Not sure why? – James111 Mar 15 '18 at 05:00
0

My answer is around this question only:

Is this even possible?

=> Yeah possible

If you want to show youtube on Webview for React-native. Here is the link for you:

https://dev.to/mutatedbread/lazy-approach-to-display-youtube-videos-in-a-react-native-app-bfc

It definitely works for both android and ios (I tried it before). There is one problem that: "you can not go fullscreen with Android."

It happens for all types of media that showed with webview of Android. This is because Android pollicy. (however they allow to override that) => Read this: https://developer.android.com/reference/android/webkit/WebView.html (search for "Full screen support")

To pass by, you can search for some project that re-implement a react-native Webview component for Android. Here is the one i used: https://www.npmjs.com/package/react-native-android-wv-video but there are others.

If you want self implementation, here is the link: Playing HTML5 video on fullscreen in android webview

Finally: After you solve the fullscreen issue for android, you can take advantage of youtube iframe to force auto start or auto fullscreen when load youtube video with this: https://developers.google.com/youtube/iframe_api_reference (If you follow instruction from the first link inside this answer, you already had youtube iframe)

Khoa
  • 2,632
  • 18
  • 13