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

Set WebChromeClient to the android's WebView during instantiation Summary:Motivation: #6405 Follow up of: #6603 satya164 Closes https://github.com/facebook/react-native/pull/6880 Differential Revi... — committed to facebook/react-native by lucasfeliciano 8 years ago
Set WebChromeClient to the android's WebView during instantiation Summary:Motivation: #6405 Follow up of: #6603 satya164 Closes https://github.com/facebook/react-native/pull/6880 Differential Revi... — committed to nightingale/react-native by lucasfeliciano 8 years ago

Most upvoted comments

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

zapbang on Mar 11, 2016

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

luco on Aug 8, 2017

@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

jose920405 on Aug 8, 2017

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"

manjeet-dobble on Nov 28, 2016

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

krapspark on Aug 26, 2016

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.

devken-net on Jul 20, 2016

@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 on Mar 14, 2016