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

[lucasfeliciano]

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

[zapbang]

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

[StephaneP]

Depends on the web rendering engine behind your device on newer android versions this should have been resolved. Anything lower then 5.0 isn't, I'll post a sample on lower device versions with this functioning

[lucasfeliciano]

@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

[lucasfeliciano]

@StephaneP just to mention, I'm running in a Nexus 5 with android 6.0.1

[charpeni]

@facebook-github-bot label android

[lucasfeliciano]

I'm implementing a PR for this issue.
Would be nice to have a discussion about the approach we want to follow:

My initial idea is to add a prop like chromeClient which is a bool to the WebView.android.js component. To contemplate this, in ReactWebViewManager.java:

  @ReactProp(name = "chromeClient")
  public void setChromeClient(WebView view, boolean enabled) {
    if (enabled) {}
      view.setWebChromeClient(new WebChromeClient() {});
  }

Another option is to set the WebChromeClient as a default behaviour for the WebView on android.

@charpeni do you know some one to tag in this discussion?

[charpeni]

@lucasfeliciano I'm not sure about WebChromeClient as default WebView client, but a prop like chromeClient seems interesting !

It seems that some mistake have slipped in your snippet, ReactWebViewManager.java

  @ReactProp(name = "chromeClient")
  public void setChromeClient(WebView view, boolean enabled) {
    if (enabled) {
      view.setWebChromeClient(new WebChromeClient());
    }
  }

@StephaneP It would be interesting to have a working example.

Maybe @mkonicek could take a look at this :)

[lucasfeliciano]

@charpeni
Indeed, some thing was wrong on it.

Thanks for fixing it, it is exactly what I meant.

For now,
there is a way to extend the WebView for android to set this attribute ?
I need to use this in production, and I'm looking for turns arounds

[charpeni]

I guess you can submit your pull request with the chromeClient prop, the discussion will follow in the pull request.

If you want to use this feature in a production application, you should cherry-pick it on release 0.22 (or older) and build react native from source.

[lucasfeliciano]

@charpeni thanks.

PR: #6603

[stereodenis]

@lucasfeliciano could you build it for 0.22?

[lucasfeliciano]

@stereodenis sure.

We needed that for production, so I made the changes and submitted the way it were just to keep the discussion going.

[charpeni]

I'll close this issue since it was merged.

[charpeni]

@facebook-github-bot close

[facebook-github-bot]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.

[markortiz]

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.

[krapspark]

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

[mytc]

@krapspark , I also having same problem. Have you solved this problem??

[manjeet-dobble]

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"

[gaguirre]

@manjeet-dobble see #5230

[1c7]

5230 not helping. still get this problem in 2017. can't play video in Webview.

( I tried Stimulator(run-ios + run-android) / iPhone 6S / Android(Samsung Galaxy Note 5) )

none of them can play video.

I am now gonna try play video directly, instead play them in web page.
lucky thing is I have choise in my current project.

（update: I didn't use react-native-video, I just use Linking, open on outside browser)

[jose920405]

+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

[luco]

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

[miladheydari]

still i cant use embed google map api in react webview :(

[dvuvne]

Hey Guys

Just to confirm, was this issue fixed? I am asking as I just found myself in exactly the same scenario.

Thanks.