React-native-youtube: On Android, `YouTube` component which is in `ScrollView` stops playback.

[n-miyo]

Summary

On Android, YouTube component which is in ScrollView stops playback.

Detail

On Android, if YouTube component puts in ReactNative ScrollView component, playback is terminated. adb logcat says:

10-14 11:23:25.977 23083 23083 W YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is not contained inside its ancestor android.widget.FrameLayout{fcacd54 V.E...... ......I. 0,0-0,0}. The distances between the ancestor's edges and that of the YouTubePlayerView is: left: 0, top: 0, right: -1794, bottom: -1080 (these should all be positive).

You can reproduce it by Example/index.android.js with
modification such as:

      <ScrollView
        style={{width: 520, height: 500}}
        <YouTube
           (suppress...)
        />
      </ScrollView>

You can replace style of ScrollView to any, but you have to assign some scrollable area.

This code works well on any iOS devices.

Information

ReactNative: v0.35.0
react-native-youtube: v0.8.0
Device: Nexus 5X / Android 7.0(NBD90W)

[antonsivogrivov]

+1

[antonsivogrivov]

@n-miyo, do you solve the problem?

[n-miyo]

@tonygriv Unfortunately, not yet.

[andrerfneves]

To me this issue happens regardless of whether the YouTube component is inside of a ScrollView or a normal View. Cannot get YouTube to run inside Android at all.

[antonsivogrivov]

@andrerfneves +1.

[davidohayon669]

Youtube player's View doe's not allow to be covered by other Views (i.e. being clipped in a ScrollView) while playing, so It pauses the video. The reported error is UNAUTHORIZED_OVERLAY which you can read about here:

https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer.ErrorReason

I'm pretty sure there is no simple solution for this as it is intentional

[cubbuk]

@davidohayon669 I am trying to run a video on Android without putting any layer on video but still get the same error. I can only run the video on fullscreen mode which I don't want, is there a way to solve that issue? Also do you know is there a way to play videos from youtube without using the api, or is this the best way possible?
Thanks

[davidohayon669]

@cubbuk what branch and commit version are you using?

[cubbuk]

I am running master branch version 0.8.1. I tried to run on branch v1 but couldn't make it work on Android.

[davidohayon669]

@ I only worked on v1 and has no problem such as that as of the last v1 commit, mainly because I got to know these problems pretty well

Why can't you set up the Android version?

[cubbuk]

I think it got tangled with old version, you are right working with v1 worked after deleting the old version from node_modules. Thanks

[Kunigaikstis]

Having the same issue just now as well. The YouTube component was wrapped in a ScrollView which, I thought, might be the reason why it keeps playing and then suddenly stopping. I had to wrap it in a view as I need another component on the screen. Still keeps doing the same thing. Furthermore, even if I set play={false} in the props - it still plays the video automatically. Running "react-native-youtube": "^1.0.0-alpha.6"

Using react-native 0.44.2 on Android (testing on a galaxy S7).

[davidohayon669]

@Kunigaikstis what error do you get, if any?

[punksta]

Hello there. Have same issue. Is there some tips how to avoid UNAUTHORIZED_OVERLAY? Adding View over Youtube doesn't help.

[afestein]

I had a very similar issue to this, where a <YouTube> component was overlaid over the top of another component but was pausing with UNAUTHORIZED_OVERLAY, despite numerous attempts to solve it with zIndex, elevation to no avail.

Eventually I figured out that it had nothing to do with the scroll view, in fact, any element underneath the component caused playback to fail, even though there was clearly nothing obscuring the YouTube video. For me, the solution was to ensure that the components were invoked in the correct order, i.e.

<ComponentWithYouTubePlayer />
<OtherStuff />

becomes

<OtherStuff />
<ComponentWithYouTubePlayer />

[yahiadfawzy]

i have the same problem you can make width and height have a fixed value
like layout_width="300dp" layout_height="20.0dp".
but that still not professional answer .