UNAUTHORIZED_OVERLAY Android bug

[abbasfreestyle]

Currently experiencing this issue on Android. iOS is working fine.

Running:
react native: 0.44
react-native-youtube: 1.0.0-alpha-4
Device: Galaxy Note 5 (real device)

I always get UNAUTHORIZED_OVERLAY error when playing the video inline, it just shows a black screen, no controls whatsoever.
If the video starts as fullscreen it works perfectly fine, as soon as it goes inline it complains.

I've used previous version on RN 0.39 and it all works fine, my coding appears to be fine too. It seems to be a bug with RN 0.44.

<YouTube videoId={videoId} play={true}
           fullscreen={false} loop={false}
           controls={1}
           onReady={(e)=>{this.setState({ready:true})}}
           apiKey={apiKey}
           style={{width:300, height:150}}
           onError={(e) => {this.YTerror(e)}}
/>

Any solutions?

[hu9osaez]

Same error using the branch v1. Just work when rotate the device.

RN: 0.44.0
react-native-youtube: 1.0.0-alpha.3

[binkkatal]

https://stackoverflow.com/questions/31638871/video-pausing-with-error-unauthorized-overlay

the developer must look a solution for this in the above link

[bethqiang]

Has anyone found a solution to this? The rotating works for me, but it's not necessarily what I'd call preferable. 😅

[asgvard]

I gave up to be honest, tried to remove <Text> in Youtube.android.js, because it seems to absolutely positioned, but it didn't solved an issue. There is also a comment here, but it doesn't seem to protect us anymore :) I even tried to inspect native Android UI hierarchy, and haven't found any view that is obviously covering the player, though in properties it says "overlayed" - true.
For now I've just embedded YT player in the WebView. As simple as this:

<WebView
  style={props.style}
  source={{uri: `https://www.youtube.com/embed/${props.videoId}?controls=0&showinfo=0`}}
/>

I know it's not a proper solution, but at least works on both iOS and Android with RN 0.44.3.
For iOS specifically it seems ridiculous to have react-native (which is kinda JS focused and encourages to unify the codebase) with the package, the adds native ObjC code, that creates webView with i-frame (which is JS-powered as well in that .html file that you have to include), just to expose that callbacks back to your JS...Ta-daaah!..I mean in RN it's rather easier to directly create i-frame right in WebView, and map the callbacks back if you really need them, with pure JS. There was a suggestion somewhere in the other Issues for this package to make a solution with WebView, I hope it will see the world someday :) But for simple "just play YT videos" use-case -
WebView + embed link as above would solve the problem.

[tafelito]

The problem with this issue seems to be the status bar. I'm using react-native-navigation that supposedly allows you to hide the SB but its not working.

Anyone found any other solution yet?

[tafelito]

Ok I actually was able to hide the status bar using StatusBar from react-native, but the problem persists, still same error

[reyhaan]

I think I might have found the reason for this error. I was running logcat and found this log that actually gave me a hint. So what I did was I just subtracted '2px' width from YouTube player and voila!!! Its working perfectly.

I am actually using react-native-drawer and inLine mode was not working at all.

[hu9osaez]

@reyhaan Where you subtract the px? I tried directly in the styles and doesn't work.

[ben54260]

I discover that Youtube view will show when change the orientation of screen, and no need to set fullscreen nor play.

So I solved this problem by change a bit of the height in the styles after onReady event be triggered.
(initial height is 301)

onReady={e => this.setState({ height: 300 })}
style={{ alignSelf: 'stretch', height: this.state.height, backgroundColor: 'black', marginVertical: 10 }}

[tafelito]

I run the example app as it is now and that one works, then I upgraded to the latest RN version, without doing any other change and then it stops working throwing that error. How could the height be different only by changing RN version?

Also I did a logcat and for me this is the error I'm getting

YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.text.ReactTextView{77856fa V.ED..... ........ 0,40-28,116 #6}. Right edge 26 px right of YouTubePlayerView's left edge. Top edge 1158 px above YouTubePlayerView's bottom edge. .

I removed all the components from RCTYouTubeExample and just left the YouTube component

EDIT:

Now I get a similar error if I don't change the height onReady

YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is not contained inside its ancestor android.widget.FrameLayout{dda59cb 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: 0, bottom: 0 (these should all be positive).

[abbasfreestyle]

Thank you @ben54260 !

This solved the problem, the videos are loading as expected and can toggle fullscreen with no issues. Strange why we need to do this, Android Youtube is a diva.

Closing

[davidohayon669]

@abbasfreestyle The Android module really is pretty sensitive

[tafelito]

@abbasfreestyle How's this solved? I just tried what @ben54260 said in the example project running on RN 0.45 and I still have the same issue. Did you change anything else other than that? What version of RN are you using? Have you tried running the example?

[reyhaan]

@tafelito can you try making those value 1 i.e. top:1, bottom: 1, right:1, left: 1 ? I am just guessing though!

[tafelito]

@reyhaan Same thing. It gives the error

YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.text.ReactTextView{312038a V.ED..... ........ 0,40-28,116 #6}. Right edge 26 px right of YouTubePlayerView's left edge. Top edge 1158 px above YouTubePlayerView's bottom edge. .

Not sure why it complains about a ReactTextView, cause I removed any extra view other than the YouTube player

[tafelito]

Ok I found the issue. On the YouTube.android.js there is a TextView. I removed it and now it's working. Seems like that is not needed anymore, unless I'm missing anything

[jm555jm]

According to youtube SDK website:

It is not permitted to overlay this fragment's view with other views while a video is playing.

This rule make me crazy, too. =(

[davidohayon669]

@tafelito There seems to be some change that cause a bug in Android on RN > 0.44
I already solved it and will probably push the next few days

[tafelito]

thanks @davidohayon669 that would be great!

[DeviousM]

@davidohayon669 did you manage to push it already? It's kinda killing purpose of the app I'm creating at the moment 😛

[davidohayon669]

@DeviousM @tafelito try alpha.6

[DeviousM]

@davidohayon669 - unfortunately, problem persists.
If this can help that's the output from logcat:

06-25 17:35:33.725 16783-16783/com.vloggerapp W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.view.ReactViewGroup{da778f3 V.E...... ........ 0,0-1080,1936 #22}. YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 319, right: 1, bottom: 929..

[davidohayon669]

@DeviousM are you sure it isn't covered in any way? what do you get when you try the example in this repo?

[chrisbendel]

@davidohayon669 I've been following this issue as it unfolds and also am having the same trouble.
If you need more information I hope I could help at least a little bit.

Project is using nativebase layouts (Container as a main wrapper for each component). Video loads up fine and plays for half a second then immediately stops with the overlay error. Also i have installed and relinked the latest version (alpha 6) and am on RN v44). Project is also using react-native-router-flux with a drawer component but I wouldn't imagine that causing any issues.

This problem persists on both emulator && physical device

YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 789, right: 293, bottom: 15

code

return (
            <View style={styles.playerContainer}>
              <YouTube
                ref="youtubePlayer"
                videoId={song.songInfo.fkid}
                play={true}
                rel={false}
                fullscreen={false}
                showFullscreenButton={true}
                showinfo={false}
                controls={0}
                apiKey={myKey}
                origin={"https://www.youtube.com"}
                style={styles.youtube}
              />
            </View>
          );

styles.playerContainer = { 
    alignItems: "center",
    justifyContent: "center",
    marginTop: 300,
    marginLeft: 50
  }
styles.youtube= {
    alignSelf: "stretch",
    height: 300,
    width: 300
}

Edit1: trying a bunch of different configurations and it seems like it's got something to do with a view much higher up in the tree. RCTView is super fucky with it

[DeviousM]

@chrissbendel - I have exactly the same issue. Also using the NativeBase & react-native-router-flux & drawer component. Don't know if it has anything to do with it.

[hieuptit93]

This solved is working for me.
I use react-navigation V5,
Simply take
<Stack.Navigaiton>
YoutubeView
<Stack.Navigation> to the outside root navigation.

[autodidaktum]

I confirm that by removing the createDrawerNavigator it works. Any idea on how to solve it? My application needs a Drawer

[vanthang91]

For those who are using Wix/React Native Navigation, it had been fixed by version 6.7.5. Please see here for details wix/react-native-navigation#6220
Here is my suggestion for using YT view in component:

• If you push or present a component that contains single YT view, you can use this lib
• If you want to load playlist or change videoId of YT in the same component, you can use https://github.com/LonelyCpp/react-native-youtube-iframe and pls test it on real Android device. Thanks @LonelyCpp 👍 👍

[rozekfr]

I have tip!

I think I maybe found a solution with react-native-navigation. If you are using stack navigation, you can't render react-native-youtube bellow active screen in stack, because active screen is above others and it overlays video. It is very strange issue, because active screen is not covered by anything, but it seems like if one of player is covered none of them works. Now I am rendering only one video at the same time and it works.

[rozekfr]

Bottom tab navigation update. If you mount (focus) tab after tab with video, the video is getting this error. All tabs are rendered and they cover each other somehow.

[brambang]

Woow. still no solution for this old issue????????

[juanpaternina]

Same here with React Navigation v5 :(

[herrera]

I have tip!

I think I maybe found a solution with react-native-navigation. If you are using stack navigation, you can't render react-native-youtube bellow active screen in stack, because active screen is above others and it overlays video. It is very strange issue, because active screen is not covered by anything, but it seems like if one of player is covered none of them works. Now I am rendering only one video at the same time and it works.

Could you a explain in details ?

[Doha26]

used the same implementation as @saravanakumargn and it also work perfect for me.
Check this for more details https://aboutreact.com/youtube-video-integration-in-react-native/

[l4rnaud]

a solution which worked for me was adding position:"absolute" style on the Youtube's parent View

[asmmahmud]

If the player is placed in Higher up in the component tree and outside of the navigation, then the problem doesn't appear.

[rajscet]

If the player is placed in Higher up in the component tree and outside of the navigation, then the problem doesn't appear.

HOW?

[92sajid110]

Sorry for the late reply. I placed youtube outside tabbar and drawer navigation. I hide tabbar on that screen so it's solved my Problem.

…

On Sat, Dec 26, 2020, 11:21 AM RajeshKumar Nasit ***@***.***> wrote: If the player is placed in Higher up in the component tree and outside of the navigation, then the problem doesn't appear. HOW? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#161 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI6XECDMALLWG4QZI5E432LSWV2VPANCNFSM4DMU4IXA> .

[RNTop]

<YouTube
    videoId={youtubeId}
    apiKey="Your API Key"
    play
    fullscreen={false} // control whether the video should play in fullscreen or inline
    loop={true} // control whether the video should loop when ended
    onReady={()=>{
       
    }}
    onError={e => {
        console.log('[Youtube-Play-Error]', e)
    }}
    onEnd={() => {

    }}
    origin={"https://www.youtube.com"}
    style={{ width: '100%', resizeMode: 'stretch', height: 350 }}
  />

Please try with this code. I am sure you will get success with this.
also, you guys getting the overlay issue because style have {alignSelf:'stretch' }.
alignSelf should be one of center, flex-end and flex-start. that is why you guys got the error with youtube.

[WillenOLeal]

I am having this issue when I am playing the video either full screen or not, whenever I pull the notifications down when the video is playing the video crashes. It is only observed on physical devices. On emulators it does not crash. Any ideas why?

[viniciuspetrachin]

With me the problem was happening and I could only fix it when instead of calling a drawer screen, I called a stack with youtube on it. I think the overlay gets from the drawer...

[WillenOLeal]

Hmmm... I am running the video on a global modal on top of a stack navigator. I do not have a drawer navigation on my app, and still having the video crash whenever the user pulls the notifications down only on physical devices.

[rizbud]

With me the problem was happening and I could only fix it when instead of calling a drawer screen, I called a stack with youtube on it. I think the overlay gets from the drawer...

what did you mean called a stack with youtube on it?

[TrungDo95]

UI Youtube on android here
style={{
height: 250,
width: Layout.window.width, // with of your screen
alignSelf: 'stretch',
marginVertical: 10
}}
Please add marginVertical <------ into style. It will work well

[Mitdd9707]

• any solution? @herrera

[HishamMubarak]

Adjusting position or height didn't work for me in the following version
"react-native-youtube": "^2.0.2"
"react-native": "0.64.2"

Finally what worked was, created a new route in the outermost stack in a switchNavigator, then navigated to there. The only downside now is that I need to manually handle the hardware back button to go back to the route it came from. If not, since it is the outermost route in navigation, the app exits.

import VideoScreen from '../screens/VideoScreen'

export const mainStack = createSwitchNavigator(
    {
        Splash: { screen: Splash },
        authStack: { screen: AuthStack },
        internalStack: { screen: InternalStack },
        VideoScreen: { screen: VideoScreen }
    }, {
        headerMode: 'none',
        initialRouteName: 'Splash',
    })

export default createAppContainer(mainStack)

[aimensasi]

Just in case anyone is still facing this issue. I ended up using react-native-portal to place the player outside of the react-navigation. This fixed the issue at least for me.

[HishamMubarak]

Just in case anyone is still facing this issue. I ended up using react-native-portal to place the player outside of the react-navigation. This fixed the issue at least for me.

Wow! Didn't know a thing as portal existed. Will try implementing this once again. Thanks for the comment

[bracecodes]

it is truely an overlapping issue setting height properly will do the job.
style={{ alignSelf: 'stretch', height: dimensions.vh * 25, backgroundColor: 'black', }}

                I tried many things and at the end by hit and trial I was able to see it is because of the height which was getting overlapped from the bottom side and then I made it device height dependent to fit always for each device

[kaystd]

I've solved this problem by disabling Reactotron - it creates overlay upon the app view

[staticGuru]

Previously, I faced same issues.
Then, I use below library for render the YouTube videos.
https://www.npmjs.com/package/react_native_youtube_streamer

[anasawan299]

I've solved this problem by removing ViewPropTypes from the package file located in "node_modules/react-native-youtube/YouTube.android.js" . it Works for me.

• Remove ViewPropTypes from 'react-native'
• Replace the line "style: ViewPropTypes.style" to "style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])"

[scarpelini]

Just in case anyone is still facing this issue. I ended up using react-native-portal to place the player outside of the react-navigation. This fixed the issue at least for me.

It just works beautifully for me. After Portal implementation, you kind of "teleport" the player to where you set your , which must be at the highest level of your application so Youtube does not throw the Overlay error by effectively not having any View over the player anymore.

The only issue is that I need to correct the player position once it gets above all the content, this is a minor adjustment though. Thank you very much @aimensasi 🤘