Menu
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?
569
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React from 'react'; import {View} from 'react-native'; import YoutubePlayer from 'react-native-youtube-iframe'; const App = () => { return ( <View> <YoutubePlayer height={300} play={true} videoId={' ...
To achieve playing Youtube videos in React Native, we will be making use of the npm dependency named react-native-youtube-iframe. We will work through using this library by fully integrating it into an app.
WebViews offer developers opportunities to render any web components in a React Native application. A web component can be anything from a whole webpage/application or just a simple HTML file. The package react-native-webview makes it super simple to embed WebViews into your React Native apps!
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'}}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
