YouTube is one of the biggest online free video hosting platform provided by Google on internet. YouTube gives us the free facility to Embed YouTube Video in web application like Websites and mobile applications like iOS mobile apps, Android mobile apps, Windows mobile apps. So in this tutorial we would going to create a react native app to Embed YouTube Video in both Android and iOS applications using WebView component. So let’s get started 🙂 .
Contents in this project Embed YouTube Video in React Native Android iOS App :
1. Copy the YouTube video URL from web browser address bar.
2. Now we need to replace the watch?v= with embed text.
For example : The video URL i am using in this tutorial is : https://www.youtube.com/watch?v=dFKhWe2bBkM now i am replacing the watch?v= with embed . After replacing the text the video URL should look like this : https://www.youtube.com/embed/dFKhWe2bBkM . This would be your embed URL.
3. Import StyleSheet, View, WebView and Platform component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, WebView, Platform } from 'react-native'; |
4. Create a Root View in render’s return block with 300 pixels height.
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View style={{ height: 300 }}> </View> ); } |
5. Now we would create the WebView component in View and set the embed URL as source.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
render() { return ( <View style={{ height: 300 }}> <WebView style={ styles.WebViewContainer } javaScriptEnabled={true} domStorageEnabled={true} source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }} /> </View> ); } |
6. Create Style for WebView.
|
1 2 3 4 5 6 7 8 9 |
const styles = StyleSheet.create({ WebViewContainer: { marginTop: (Platform.OS == 'ios') ? 20 : 0, } }); |
7. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React, { Component } from 'react'; import { StyleSheet, View, WebView, Platform } from 'react-native'; export default class App extends Component<{}> { render() { return ( <View style={{ height: 300 }}> <WebView style={ styles.WebViewContainer } javaScriptEnabled={true} domStorageEnabled={true} source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }} /> </View> ); } } const styles = StyleSheet.create({ WebViewContainer: { marginTop: (Platform.OS == 'ios') ? 20 : 0, } }); |
Screenshot in Android device:
Screenshot in iOS device :
Thanks for the tutorial.
It renders to the screen ok, but when I try to play it, there is nothing. You can see the counter like a video is playing but the screen is black
John after your comment i have just again compile and run this code on my device and the video is playing perfectly fine, I am attaching the screenshot after playing this video along with comment : https://reactnativecode.com/wp-content/uploads/2018/01/YouTube_Screenshot.png 🙂 .
hello, I’m also having the same issue and found nothing online. Are you using emulator or a real device for android ? What’s your RN and android versions ?
I am testing this code into real android and iOS device and the code is working perfectly fine. my android version is android Nougat and Rn version is .50 .
This code is working perfectly in real device but when i tried this code in emulator, then it is not working.
Sumit in emulator device sometimes it faces network problem .
How i should fetch youtube video url from mysql database
So i can create dynamic videos
Nitin you can first insert the URL’S inside your MySQL database and then simply show all the URL’s in listview and on user selecting any video simply load that video in WebView to play , You can read my this tutorial this would help you : https://reactnativecode.com/flatlist-using-json-parsing-data/
Can you share your AndroidManifest? Did you enable hardware acceleration or anything?
It works for me in the real device, but it fails miserably in the emulator. In the emulator, I get a black screen and listen only to the audio of the video.
Fred i have changed nothing in my AndroidManifest.xml file, the file is same as yours when you create new project in react native.
this is known issue, it will not work on android.
https://github.com/facebook/react-native/issues/6405
I Love the all tutorials you have posted here and thanks alot for this owesome tutorial ????????????????.
First of all thank you Nitin for comment and welcome bro 🙂 .
This code is working fine from your video embedded URL but the bellow youtube like is not working. I can’t understand whats the problem. please help.thanks in advance.
Youtube Video link
https://www.youtube.com/embed/9hJ8lLNWrM4
when I click to play it tell “Video unavailable” but this exists and working fine on web
Sudipta your were right. I have tried it with this URL and its showing video not available. But i have also tried with other URL’s and its working fine.
Hello!
Testing on Ios when I play the video he always opens in fullscreen. Can you change? It plays the video in the size of the webview
Please be more specific, you want to open video not in full screen.
how to auto play youtube video ??
Sorry Rahul to make videos auto play you have to use library.
please update this code. WebView is not suported in react-native anymore.
hello, I am able to embed youtube video in my react-native app.but when I click on the video title it will be redirected to the youtube. which I don’t want. user shouldn’t go to youtube. how to disable that?