Play youtube video in react-native-video

Question

How can i play youtube video on react-native-video,

i don't want to play video in react-native-youtube or in webview,

Answer 1

Another option that I have checked and used is the WebView. To use it make sure you put the component in a View with a flex. Ex:

<View style={{flex: 1}}>
    <WebView
        style={ {  marginTop: (Platform.OS == 'ios') ? 20 : 0,} }
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{uri: 'https://www.youtube.com/embed/'+this.state.pictureData.idVideo }}
    />
</View>

in my case, what I did was to obtain the identifying part of the YouTube video that would be for example: https://www.youtube.com/watch?v=KQ6zr6kCPj8

this.state.pictureData.idVideo would contain only: KQ6zr6kCPj8

To use it install:

1. $ npm install --save react-native-webview
2. link react-native-webview

and if you want more information: https://github.com/react-native-community/react-native-webview

Answer 2

react-native-video does not support YouTube playback. This is something we have been investigating in our own projects. While it will support playback of Vimeo pro videos due to the direct HLS and MP4 files being exposed, YouTube does not provide this reliably. It used to be sometimes possible to get the direct video URL from some YouTube videos but that is not reliable anymore and might not even be possible with the latest API.

Currently, we have been dumping out to the YouTube app or the YouTube site in order to avoid having to implement the official react-native-youtube repository, but we will be eventually integrating with that repo in order to provide a more seamless user experience.

I understand that you don't want to use this solution, but, unfortunately, using react-native-video is not an option for you for this issue right now, and likely never will be. See this SO question for more.