Geek Answers Handbook

Embed YouTube video in Webview of React Native

I am trying to play a Youtube video in a response android / ios android application. I 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 it displays the entire youtube page in the webview, including the comments section.

enter image description here

I want to display only the video section, not the comment section. Is something missing in the url?

+10
source share
4 answers

The easiest way to embed YouTube in your React Native iOS device is to use <WebView> . All you have to do is 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'}} />
+14
source

I think you can download the html application from youtube from the video directly into your own webview. Instead of navigating to the URL, you should instead set the original WebView attribute to your html, for example:

 <WebView source={{ html: "HTML here" }} .../>

based on this post describing how to load youtube iframe into a regular Android webview, you can replace the “HTML here” with the actual html so that it looks like this:

 <WebView source={{ html: "<html><body>Look Ma' a video! <br /> <iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>" }} .../>

You can get connection instructions insert the link for youtube video here .

+4
source

This code worked for me

 <WebView style={{ marginTop: 20, width: 320, height: 230 }} javaScriptEnabled={true} domStorageEnabled={true} source={{ uri: "https://www.youtube.com/embed/-ZZPOXn6_9w" }} />
+3
source

I had your problem. You want your users to pass the video tutorial as a backup, but the naive user does not know what the inline link is, it just copy and paste the URL from the browser and paste it, which will not be inline, but you can convert It. Check out this example:

Original video: - https://www.youtube.com/watch?v=qaiLSpqeBHY
Embedded video: - https://www.youtube.com/embed/qaiLSpqeBHY

Let's see how you can convert it:

 const OriginalVideo = "https://www.youtube.com/watch?v=qaiLSpqeBHY" const SplitedVideo = OriginalVideo.split("watch?v=") const Embed = SplitedVideo.join("embed/") console.log(Embed)

Here is your embedded video converted from the original video URL.

Life example: -

  componentDidMount() { const Video = this.props.navigation.getParam("Video"); const MyVideo = Video.split("watch?v="); const EmbededVideo = MyVideo.join("embed/"); this.setState({ Video: EmbededVideo }); }
+1
source

More articles:


All Articles