Embed YouTube Video in React Native Android iOS App Using WebView

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.

4. Create a Root View in render’s return block with 300 pixels height.

5. Now we would create the WebView component in View and set the embed URL as source.

6. Create Style for WebView.

7. Complete source code for App.js File :

Screenshot in Android device:

Embed YouTube Video Screenshot in iOS device :

18 Comments

  1. 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

  2. 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.

  3. this is known issue, it will not work on android.
    https://github.com/facebook/react-native/issues/6405

  4. I Love the all tutorials you have posted here and thanks alot for this owesome tutorial ????????????????.

  5. Sudipta Mukherjee

    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

  6. Sudipta Mukherjee

    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.

  7. 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

Leave a Reply

Your email address will not be published. Required fields are marked *