react-native: Webview on android doesn't load embed youtube url

import React, { View, WebView }  from 'react-native';

export const YoutubeScreen = React.createClass({
  render: function() {
    return (
      <View style={{flex: 1}}>
        <WebView
          style={{flex:1}}
          javaScriptEnabled={true}
          source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
        />
      </View>
    );
  }
});

If instead of using source={{uri: youtubeUrl}} use source={{html: iframeHtml}} it works. But i don’t want to use an iframe since I can’t have access to the html inside of the iframe.

On iOS works fine. Is that a bug or a normal behaviour for android?

edit: Might be related to this:

  • set a WebChromeClient to your WebView

        web.setWebChromeClient(new WebChromeClient());
    
  • and turn on hardwareAccelerated value

    <application
    android:hardwareAccelerated="true"...
    

check out http://developer.android.com/reference/android/webkit/WebView.html and read HTML5 Video support part.

source: http://stackoverflow.com/questions/8122298/youtube-embed-videos-not-working-in-webview-whats-wrong-with-this-code

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 3
  • Comments: 25 (13 by maintainers)

Commits related to this issue

Most upvoted comments

I too am struggling with getting a youtube video playing in React Native.

+1 on this. I can’t play videos on Kitkat, even setting android:hardwareAccelerated="true" in manifest.

+1

@1c7 Yes, I had this same idea using Linking and I had to convince my client to allow me to do it, because even react-native-video did not work for me

I am able to embed youtube video within webview but unable to get fullscreen option on the video in android, any help can be appereciated

<WebView
              source={{uri: this.state.youtubeUrl}}
              style={{height:240, width:width, justifyContent:'center', alignItems:'center', backgroundColor:'black'}}
 />

where this.state.youtubeUrl is  "https://www.youtube.com/embed/"+youtubeVideoId+"?version=3&enablejsapi=1&rel=0&autoplay=1&showinfo=0&controls=1&modestbranding=0"

@lucasfeliciano is simply setting chromeClient prop in my WebView sufficient for this? Still getting just a black screen when displaying a embedded YouTube video page.

Is this props available on react-native 0.29.x? How to use this one? I cant see it on the docs.

I’m just new to react-native and working with webview, then the site that is i want to open on webview says Unssuported browser. Please use chrome instead. I wonder if this prop will help me on my project.

@StephaneP would be awesome to have an working example on that. 😃 I don’t want to extend the react-native webview and create an custom component just because of that, if I can use the react-native webview component I’m really glad