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