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?

[matthiasleitner]

For those of you who ( @nimamyscreen ) are using react-native-navigation and seeing the issue with overlay by com.reactnativenavigation.views.SnackbarAndFabContainer, if you are not using snackbar or fabs you can uncomment the line here and it works:

https://github.com/wix/react-native-navigation/blob/0f4e30ac33e1f9793aa5efd63019f75cb3ad49d5/android/app/src/main/java/com/reactnativenavigation/layouts/SingleScreenLayout.java#L65

Definitely a hack, will try to work out a maintainable solution for react-native-navigation

[GoaGit]

@matthiasleitner we tried your suggestion, but it seems that just commenting out

//createFabAndSnackbarContainer();

does not do the trick. There are dependencies on the parts inside this method. Do we miss something?

[matthiasleitner]

@GoaGit you also need to comment this as it will result in a NullPointer otherwise https://github.com/wix/react-native-navigation/blob/0f4e30ac33e1f9793aa5efd63019f75cb3ad49d5/android/app/src/main/java/com/reactnativenavigation/layouts/SingleScreenLayout.java#L133 didn't change anything else

[chulanovskyi]

I've ran into a same problem, but with react-navigation. My components hierarchy is: Drawer -> StackNavigator -> TabNavigator. On one of the tab i render Youtube component, it works normally until i try to make it full-screen. The traceback from android studio is:

E/AndroidRuntime: FATAL EXCEPTION: main
                  Process: com.myapp, PID: 2718
                  java.lang.RuntimeException: Unable to start activity ComponentInfo{com.myapp/com.myapp.MainActivity}: android.app.Fragment$InstantiationException: Unable to instantiate fragment com.inprogress.reactnativeyoutube.VideoFragment: make sure class name exists, is public, and has an empty constructor that is public
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
                      at android.app.ActivityThread.handleRelaunchActivity(ActivityThread.java:4519)
                      at android.app.ActivityThread.-wrap19(ActivityThread.java)
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1483)
                      at android.os.Handler.dispatchMessage(Handler.java:102)
                      at android.os.Looper.loop(Looper.java:154)
                      at android.app.ActivityThread.main(ActivityThread.java:6119)
                      at java.lang.reflect.Method.invoke(Native Method)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
                   Caused by: android.app.Fragment$InstantiationException: Unable to instantiate fragment com.inprogress.reactnativeyoutube.VideoFragment: make sure class name exists, is public, and has an empty constructor that is public
                      at android.app.Fragment.instantiate(Fragment.java:633)
                      at android.app.FragmentState.instantiate(Fragment.java:111)
                      at android.app.FragmentManagerImpl.restoreAllState(FragmentManager.java:1942)
                      at android.app.FragmentController.restoreAllState(FragmentController.java:135)
                      at android.app.Activity.onCreate(Activity.java:957)
                      at com.facebook.react.ReactActivity.onCreate(ReactActivity.java:53)
                      at android.app.Activity.performCreate(Activity.java:6679)
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) 
                      at android.app.ActivityThread.handleRelaunchActivity(ActivityThread.java:4519) 
                      at android.app.ActivityThread.-wrap19(ActivityThread.java) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1483) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:154) 
                      at android.app.ActivityThread.main(ActivityThread.java:6119) 
                      at java.lang.reflect.Method.invoke(Native Method) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) 
                   Caused by: java.lang.InstantiationException: java.lang.Class<com.inprogress.reactnativeyoutube.VideoFragment> has no zero argument constructor
                      at java.lang.Class.newInstance(Native Method)
                      at android.app.Fragment.instantiate(Fragment.java:622)
                      at android.app.FragmentState.instantiate(Fragment.java:111) 
                      at android.app.FragmentManagerImpl.restoreAllState(FragmentManager.java:1942) 
                      at android.app.FragmentController.restoreAllState(FragmentController.java:135) 
                      at android.app.Activity.onCreate(Activity.java:957) 
                      at com.facebook.react.ReactActivity.onCreate(ReactActivity.java:53) 
                      at android.app.Activity.performCreate(Activity.java:6679) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) 
                      at android.app.ActivityThread.handleRelaunchActivity(ActivityThread.java:4519) 
                      at android.app.ActivityThread.-wrap19(ActivityThread.java) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1483) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:154) 
                      at android.app.ActivityThread.main(ActivityThread.java:6119) 
                      at java.lang.reflect.Method.invoke(Native Method) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) 

UPDATE I have tested the YouTubeStandaloneAndroid and it works perfectly with no crashes.

UPDATE Ok, temporary fix is to use react-native-thumbnail-video to render only preview image of the video, and, after clicking on it launch Standalone player. For now code looks like this:

import { YouTubeStandaloneAndroid } from 'react-native-youtube';
import Thumbnail from 'react-native-thumbnail-video';

const API_KEY = '***';

class VideoTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.video.videoId !== this.props.video.videoId) {
      this.setState({ show: false });
    }
  }

  openPlayer = (videoId) => {
    YouTubeStandaloneAndroid.playVideo({
      apiKey: API_KEY,
      videoId,
      autoplay: true
    })
      .then(() => console.log('Player closed'))
      .catch(e => console.error(e));
  };

  render() {
    const { title, date, videoId } = this.props.video;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.date}>{date}</Text>
        </View>
        {this.state.show &&
        <View style={styles.youtubeContainer}>
          <Thumbnail
            url={videoId}
            onPress={() => this.openPlayer(videoId)}
            imageHeight="100%"
          />
        </View>
        }
      </View>
    )
  }
}

[GoaGit]

Thanks @matthiasleitner. This is still not enough as the Youtube player detects an overlay. We will further investigate this issue.

[die20]

Does anyone know if this problem persists if you setup the YouTube player api in webview?

[Ilushkanama]

@GoaGit SnackbarAndFabContainer is used not only in SingleScreenLayout, but also in BottomTabsLayout. If your app is tab based, try commenting out everything related to snackbarAndFabContainer in BottomTabsLayout. That worked for me.

[GoaGit]

Thank you @Ilushkanama. We managed to solve this issue as well.

[jeiemgi]

@matthiasleitner Your solution works with react-native-navigation.

[LucasBassetti]

Any solution using react-navigation and the YouTube component?

[jeiemgi]

@LucasBassetti Have you got the same problem UNAUTHORIZED_OVERLAY ?

[LucasBassetti]

Yes @jeiemgi

[afestein]

For anyone else working through this issue in conjunction with react-navigation:

I've created a bare bones app to demonstrate this issue at https://github.com/afestein/react-navigation-youtube-demo.

None of the combinations I've tried precisely replicate the "unauthorised overlay" error I'm seeing in my app, but they do demonstrate YouTube videos becoming unplayable when you switch tabs.

It has a few different branches:

master uses createBottomTabNavigator. This demonstrates the 'black' unplayable YouTube videos.

material-bottom-tabs uses the material bottom tabs. This is what I'm using in my React Native app and demonstrates the same behaviour as above.

with-stack-navigator uses a stack navigator. This branch seems to work perfectly fine when playing YouTube videos.

Hopefully this is a good starting point to try and troubleshoot this issue.

[ziyafenn]

@matthiasleitner even though your solution solves the youtube issue, it makes app crash when you use react-native-navigation function popToRoot.

So a proper solution still needed...

[ziyafenn]

Here is an unapproved pull request for react-native-navigation that solves the youtube overlay problem without crashing the app https://github.com/wix/react-native-navigation/pull/2165/files?utf8=%E2%9C%93&diff=split

[Kisepro]

@afestein Hello, Is there any news about youtube with react-navigation ? I didn't manage to find an issue on the react-navigation github

Having the same overlay problem when I switch tab :-(

[mahesh963]

Same problem！ When some other view on top of "Youtube View", this may case "UNAUTHORIZED_OVERLAY ". Youtube View needs to be on the top zIndex of the screen. I reslove this bug : move the "Youtube View" to top of you views.

@abbasfreestyle "Youtube View" can not be blocked by other views

How You solved this is Issue? Can you explain it briefly? I was stuck at the same issue.

[JaydeepJikadra]

Here is an unapproved pull request for react-native-navigation that solves the youtube overlay problem without crashing the app https://github.com/wix/react-native-navigation/pull/2165/files?utf8=%E2%9C%93&diff=split

Hello @ziyafenn I have used "react-native-navigation": "^2.0.2621" in my project. and there is no any file found as you mentioned and any hack for V2.

[ziyafenn]

hi @JaydeepJikadra, i'm using v1 and unfortunately, i can't help you with v2.

[JaydeepJikadra]

https://github.com/wix/react-native-navigation/issues/4256

[iacocesar]

same problem using react-navigation

RN 0.57.6 YT Player lasted verison

[SaraChicaD]

So we haven't found a solution to this? I'm going to file an issue with react-navigation and see wha they say. I'm on RN 59.2, react-navigation 3.3.2 and react-native-youtube 1.1.0

The issue is here in case any of y'all want to go over and comment/add your thoughts.

UPDATE: We found that it worked on Android at 2.18.2

[SamiChab]

For me it wasn't working when I switched between tabs (react-navigation), so I created a switch navigator and I switch between the tabs through a bottom tab bar I created manually. It works!

[AyushAppin]

Any solutions with react-native-navigation V2

[SaraChicaD]

@AyushAppin We found that it worked on Android at 2.18.2

[AyushAppin]

@AyushAppin We found that it worked on Android at 2.18.2

I think you are talking about react-navigation rather than react-native-navigation. Let me check it on that version though.

[AyushAppin]

@JaydeepJikadra Did you found any solutions for this issue?

[afestein]

This issue has been open for over 2 years, and this repo hasn't had a commit in over a year, so personally I'm looking at an alternative solution rendering YouTube videos through a <WebView> instead.

Furthermore, I tried using this library on a fresh install of the latest React Native (0.59.8) and I couldn't get it working at all (just a blank square appeared). I'm not sure if that was just a quirk in my setup but it's eroded my confidence further. (RN needs to be upgraded to 0.59 to satisfy the new Play Store 64-bit requirement after August 1).

I think this workaround for react-navigation is clever, but I really don't want to roll my own tab navigator.

[rochapablo]

Same here error: "UNAUTHORIZED_OVERLAY".

"react": "16.8.3",
"react-native": "0.59.9",
"react-native-youtube": "^1.1.0",
"react-navigation": "^3.11.0",

[brasrox]

Same here error: "UNAUTHORIZED_OVERLAY".

"react": "16.8.3",
"react-native": "0.59.9",
"react-native-youtube": "^1.1.0",
"react-navigation": "^3.11.0",

same result here using this setup too!

[hack-and-backslash]

@rochapablo @brasrox

Apparently, this is a react-navigation issue, especially if you're using 'createBottomTabNavigator'.

I switched to "react-navigation": "2.18.2". Which in turn needed me to remove 'createAppContainer' call from my main nav setup and return my nav simply without the AppContainer. It worked!

[JVictorV]

Had the same problem when i changed from stackNavigatior to drawerNavigatior

EDIT:

I've found a workaround for my problem, i created a new stackNavigator inside the switchNavigator with the youtube player view and manually handled the navigation

const TutorialVideoStack = createStackNavigator({
    tutorialView: {
        screen: TutorialView,
        navigationOptions: ({ navigation }) => ({
            title: 'Tutorial',
            headerLeft: <BackArrow navigation={navigation} />,
            ...navigationConstants,
        }),
    },
});

export default createAppContainer(
    createSwitchNavigator(
        {
            App: AppStack,
            Auth: AuthStack,
            Tutorial: TutorialVideoStack,
        },
        {
            initialRouteName: 'Auth',
        },
    ),
);

[mramadhanrh]

For anyone who using this with react navigation, I got this problem gone, just by adding the screen on the most top / root of stacknavigator. the one that usually the value of createAppContainer parameter. 🍻

[Tercera]

@ramazord do you have a code sample?

[marksturm]

@ramazord example please :-)

[mramadhanrh]

For example if you have a file that use createAppContainer like this :

Example :

Homepage.js

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

App.js

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

And you have a component that have react-native-vdeo in it, lets call the component is <YoutubeVideo />

then modify the Homepage.js (the stackNavigator that putted into createAppContainer a.k.a the root), like this

Homepage.js

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import YoutubeVideo from './YoutubeVideo';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Video: {
    screen: YoutubeVideo,
  },
  Home: {
    screen: HomeScreen,
  },
  //Dont put it here it will not resolve the UNAUTHORIZED_OVERLAY problem
});

export default createAppContainer(AppNavigator);

@marksturm @Tercera I'm sorry for the slow response i'm pretty hectic this week 😅😅😅

[marksturm]

thanks :) but i found out, that it does not work with the drawernavigation ...

[mramadhanrh]

thanks :) but i found out, that it does not work with the drawernavigation ...

Yeah, sadly i can't find the solution for that 😓

[valerusg]

In my case I have several createMaterialTopTabNavigator() and the same with createStackNavigator(). The problem wasn't navigation, was the "MenuProvider" set in "App".

This way it works:

AppNavigationContainer.tsx:

const MyOffersTabStack = createMaterialTopTabNavigator(
    {
        MisCuponesAhorroScreen,
        MisFavoritosScreen,
    },
    {
        tabBarPosition: 'top',
        initialRouteName: 'MisCuponesAhorroScreen',
        lazy: true,
        swipeEnabled: true,
        animationEnabled: true,
        navigationOptions: {
            header: null,
            mode: 'float',
        },
        tabBarComponent: MCMyOffersTabBar,
    }
);

const HomeTabStack = createMaterialTopTabNavigator(
    {
        HomeScreen,
        StoreScreen,
        MyOffersTabStack,
        MyShoppingListsScreen,
        ProfileScreen
    },
    {
        tabBarPosition: 'bottom',
        initialRouteName: 'HomeScreen',
        lazy: true,
        swipeEnabled: () => LoginUtils.isUserLogged(),
        animationEnabled: true,
        // @ts-ignore
        navigationOptions: ({navigation}) => ({
            tabBarVisible: tabbarVisible(navigation),
            header: null,
            mode: 'float'
        }),
        tabBarComponent: MCHomeTabBar,
    }
);

const MainStack = createStackNavigator(
    {
        MCSplashScreen,
        HomeTabStack,
        LoginScreen,
        RegisterScreen,
        StoresFinderScreen,
        ...,
        HelpScreen,
        YoutubePlayerScreen,
    },
    {
        initialRouteName: 'MCSplashScreen',
        headerMode: 'none',
        transitionConfig: () => Platform.OS === 'ios' ? fromRight() : fromBottom(),
    }
);

const AppStack = createStackNavigator(
    {
        Main: {
            screen: MainStack,
        },
        LoadingModal,
        AddExtraIdentificationModal,
        RecoverPasswordModal,
        ...,
        MCAddProductFilterModal,
    },
    {
        mode: 'modal',
        headerMode: 'none',
        transparentCard: true,
        initialRouteName: 'Main',
        navigationOptions: {
            swipeEnabled: false,
        },
        transitionConfig: () => fadeIn(),
    }
);

/**
 * Exporting the AppNavigationContainer of the App.
 * Will be exposed all the available screens and modals.
 */
export default createAppContainer(AppStack);

and the App.tsx:

public render() {
        return (
            {/*<MenuProvider> THIS was the problem (move to the screen that really needs it)*/ }
            <View style={{flex: 1}}> 
                <StatusBar barStyle={'dark-content'} translucent backgroundColor={Colors.TRANSPARENT} />
                <Provider store={App.APP_STORE}>
                    <View style={{flex: 1, backgroundColor: Colors.WHITE_FAFAFA}}>
                        <AppNavigationContainer ref={(view: any) => NAV_REF = view} />
                    </View>
                </Provider>
            </View>
            {/*</ MenuProvider> THIS was the problem */ }
        );
    }

and YoutubePlayerScreen.tsx:

import React from 'react';
import {IScreenDefaultProps} from '../../utils/GenericUtils';
import Config from 'react-native-config';
import YouTube from 'react-native-youtube';
import {StatusBar} from 'react-native';

interface IYoutubePlayerScreenArgs {
    url: string;
}

export default class YoutubePlayerScreen extends React.Component<IScreenDefaultProps<IYoutubePlayerScreenArgs>> {

    public componentDidMount(): void {
        StatusBar.setHidden(true);
    }

    public componentWillUnmount(): void {
        StatusBar.setHidden(false);
    }

    public render() {
        const splitUrl = this.props.navigation.getParam('url', '').split('/');
        const videoId = splitUrl[splitUrl.length - 1];

        return (
            <YouTube
                play
                videoId={videoId}
                showinfo={false}
                modestbranding
                showFullscreenButton={false}
                onReady={e => console.log('onReady', e)}
                onChangeState={e => console.log('onChangeState', e)}
                onChangeQuality={e => console.log('onChangeQuality', e)}
                onError={e => console.log('onError', e)}
                style={{width: '100%', height: '100%'}}
                apiKey={Config.ANDROID_API_KEY}
            />
        )
    }
}

With this configuration, the YoutubePlayerScreen.tsx works correctly. Hope someone helps!

[lalitkumar50678]

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

I'm not found "TextView" in YouTube.android.js . I Found Text but it not use in this file

[imran1992]

Working Here!!. Well. there is some view over the youtube player when i use react-navigation. And my video paused due to UNAUTHORIZED_OVERLAY Android bug.

react-navigation@4.0.10
react-navigation-drawer@2.3.1
react-navigation-stack@1.10.2
react@16.8.3
react-native@0.59.10
react-native-safe-area-context@0.5.0
react-native-safe-area-view@1.0.0
react-native-youtube@2.0.0
react-native-responsive-screen@1.3.0

So i used react-native-safe-area-context and react-native-safe-area-view to wrap my whole App including react-navigation to avoid any screen edges.

import React, { Component } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';
import MyWholeApp from './App';
class AppContainer extends Component {
  render() {
    return (
      <SafeAreaProvider>
        <SafeAreaView forceInset={{ top: 'always' }} style={{ flex: 1 }}>
         <MyWholeApp/>
        </SafeAreaView>
     <SafeAreaProvider>)}
     }

And in one of screen of Stack Navigation used react-native-youtube in render method as this:

import React, { Component } from 'react';
import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen';
class UtubeScreen extends Component {
  render() {
    return (
              <View
              style={{
                  width: widthPercentageToDP(100),
                  height: heightPercentageToDP(100) 
                      }}>
                  <View
                   style={{
                  width: widthPercentageToDP(100),
                  height: heightPercentageToDP(30) ,
                  backgroundColor: '#222'
                      }}>
                 <YouTube
                 ref={this._youTubeRef}
                 apiKey={'YOUR_API_KEY'}
                 videoId={'98LoiMZ59Jw'}
                 play={true}
                 fullscreen={false}
                 showFullscreenButton={true}
                 style={{width: widthPercentageToDP(100),height: heightPercentageToDP(30)}}
                 onProgress={({ currentTime }) => {
                 this.setState({ currentTime });
                 }}
                 modestbranding={true}
                 rel={false}
                 showinfo={false}
                />
          </View>
    </View>)}
     }

[saravanakumargn]

This code is working for me.

const [iscontainerMounted, setIsContainerMounted] = useState(false);
const [containerWidth, setContainerWidth] = useState();

<View
    style={{
      flex: 1,
    }}
    onLayout={({
      nativeEvent: {
        layout: { width },
      },
    }) => {
      if (!iscontainerMounted) setIsContainerMounted(true);
      if (containerWidth !== width) setContainerWidth(width);
    }}
    >
    {iscontainerMounted && (
      <YouTube
        apiKey={constants.YT_KEY}
        videoId={videoData.id.videoId}
        play
        style={{
          alignSelf: 'stretch',
          height: PixelRatio.roundToNearestPixel(containerWidth / (16 / 9)),
        }}
      />
    )}
</View>

[abdulsami1105]

Any update on this issue?

[santanu07]

any update on this issue

[Aung-Myint-Thein]

I managed to make this work. Just make sure the view with youtube is not hidden or covered by another view AND the height of the component is properly set. So, I put padding in the wrapper view as following:

<View style={{
    height: (Dimensions.get("window").width * (9/16)) + 20 , 
    paddingVertical: 10
}}>
     <YouTube 
          apiKey="key"
          videoId={"id"}
          play 
          loop 
          style={{ alignSelf: 'stretch', height: (Dimensions.get("window").width * (9/16)) }}
          controls={1}
      />
</View>

[pragneshpj]

if i remove createDrawerNavigator then it works. (Video will play properly in android with RN-0.61.2, react-navigation 3.11.1) but its not solution. can any one help me.

[praveenganesh]

finally!! I am giving up, i removed this module and usedreact-native-thumbnail-video. now no problem for me

[OmarBasem]

Any updates???

[OmarBasem]

I found a fix. You should never render more than one YouTube component at the same time. Render one Youtube component for the currently playing video, and for the other videos just render a thumbnail using an Image component.

[davidohayon669]

@OmarBasem Well, it is written in the single documentation page of this library