Embed youtube video in Webview of React Native

Question

I am trying to play Youtube videos in react native android/ios app. I have defined a webview:

<WebView
    style={styles.frame}
    url={this.props.url}
    renderLoading={this.renderLoading}
    renderError={this.renderError}
    automaticallyAdjustContentInsets={false}
/>

And passing the url of the video I want to play:

this.navigate('Play', 'https://www.youtube.com/watch?v=RJa4kG1N3d0')

But this displays the whole youtube page in the webview including the comments section.

I want to display only the video section and not the comment section. Is there anything missing in the url?

Answer 1

The easiest way to embed YouTube in the React Native iOS device is to use the <WebView>. All you need to do is to replace watch?v= with embed. This will not work with Android.

Example:

<WebView
        style={{flex:1}}
        javaScriptEnabled={true}
        source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>