React-native-youtube: Black screen when embedding youtube video

[nhcuong95]

Hi, I'm using react-native 0.40.0. When I integrated the the example snippet into my project, I only get the empty black screen.

Same problem here: https://github.com/inProgress-team/react-native-youtube/issues/65
but I don't want to use WebView to solve this issue. Anyone know how to fix it?

Thanks alot!

[morelazers]

@nhcuong95 Android/iOS? If you're on Android make sure that the project is included in MainApplication.java and that you've rebuit the project with react-native run-android.

Usually a red-line around the component indicates that it hasn't been installed properly.

[nhcuong95]

@morelazers I'm working on the iOS one. And I saw a red-line around the component too.

I have been looking around for hours but haven't found a solution yet.

[tuld01061]

@nhcuong95 I got the same problem after upgrating my project to react-native 0.40.0. Because, like @morelazers said, react-native-youtube hasn't been installed properly. I rolled back to use react-native 0.39.0 and this problem was disappeared.

[davidohayon669]

@nhcuong95 the red frame happens if I remember correct because the YTPlayerView-iframe-player.html file that holds the inner iframe source isn't found by the native code.
Did you incorporated that file in you project correctly?

Try installing my fork for this repository by running
npm install github:davidohayon669/react-native-youtube#v1 --save
and following the instructions on the README. My fork takes care of all the assets installation with react-native link and rnpm link command lines

[ankitbisht143]

For android you must provide apiKey.
https://developers.google.com/youtube/android/player/register
Register your application. Enable youtube api and use that api in apiKey.
<YouTube videoId="" apiKey="" play={false} fullscreen={true} loop={false}/>