Video not visible on android emulator

[dmathewwws]

This could be similar to #26, but I'm not trying to get the video to work with a Modal button, I'm just trying to display the Youtube video on my screen.

When screen loads, thumbnail loads properly

But when trying to play video:

Here is a video from Google Pixel 2 API 27 Simulator, audio works great, and you can press all the buttons, just the video doesnt show. It also works great on iOS with same code.

Here is the code:

const DeepDiveYoutubeItem = ({ deepDiveItem, parentComponentId }) => {

  const SCREEN_WIDTH = Dimensions.get('window').width;

  return (
      <YTPlayer
        height={SCREEN_WIDTH*(9/16)}
        width={SCREEN_WIDTH}
        videoId={deepDiveItem.primary} // 'BHenknGIZPs'
        onError={e => { console.log('e', e); }}
      />
  );
};
export default DeepDiveYoutubeItem;

[dmathewwws]

This is the package versions

"react-native-webview": "^9.1.1",
"react-native-youtube-iframe": "^1.2.4",

[LonelyCpp]

Hi @dmathewwws
That's rather odd 🤔 The player controls look very different in your phone. Here's how it usually looks like -

what you can try

Set the forceAndroidAutoplay flag on android.

<YTPlayer
        height={SCREEN_WIDTH*(9/16)}
        width={SCREEN_WIDTH}
        videoId={deepDiveItem.primary} // 'BHenknGIZPs'
        onError={e => { console.log('e', e); }}
        forceAndroidAutoplay={Platform.OS === 'android'}
      />

Info I will need

• are you using expo?
• what react native version are you on?
• have you tested it on other android versions?

I see this is happening on API 27, I will try to reproduce it.

Thanks!

[dmathewwws]

hey, I think you are on to something with checking Android API version.

I tried it on my physical Android device. Videos shows as expected + controls show as in your screenshot. I'm on Android 10 (API 29)

btw: to answer your question:

• not using expo
• "react-native": "0.62.1",

[itsdiala]

This is happening on my end as well. It works seamlessly on iOS, however, on android, only the voice is coming through and not the frames. I get a black screen from the moment the video starts playing till the end (I can see the thumbnail, though). I tried displaying the video within a modal and without it, and tweaking the styling, but it didn't help.

Dev env (not using expo) "react-native-webview": "^10.3.1", "react-native-youtube-iframe": "^1.2.4", "react-native": "0.60.6", and I am on android 9 (API 28).

[dmathewwws]

This this only happening on the Android emulator?

b/c I was thinking it could be a low memory issue, I havent seen this issue on an actual Android device.

[LonelyCpp]

@thisisdiala @dmathewwws There seems to be some weird problem with android emulators :(

I can reproduce this "grey screen with audio only" on emulators (API 28, 29), but works perfectly fine on actual devices. (emulators with android 10 does not seem to be affected either)

I'm still investigating

[CyberCyclone]

This is interestingly annoying. I've got a Amazon Firestick that doesn't want to change the video size when I enter fullscreen (player controls go full screen, but the actual video stays the same size). Due to not being able to see videos in the emulator on Android API 29, I can't tell if this resize bug is Android or Firestick related.

[sidVaidya]

@LonelyCpp @dmathewwws anyone found a solution for this issue ? The video is not visible on both emulator and physical device only audio is playing.

[LonelyCpp]

@sidVaidya if it's not showing up on a physical device - you probably have not set the height and width props correctly. (the YouTube player defaults to 0)

This issue shows up with the player is in a flex box with either justifyContent or alignItems set.

Can you try setting both these values to some value greater than 200?

[sidVaidya]

@LonelyCpp this is what i have

[LonelyCpp]

Try giving it a width

[sidVaidya]

@LonelyCpp ya also tried that same result only audio plays

[sidVaidya]

@LonelyCpp its working on samsumg devices but not working on redmi devices

[sami-99]

same issue for me <View style={{alignSelf:'center',width:'94%',marginTop:15}}> <YoutubePlayer height={225} width={'100%'} ref={playerRef} videoId={'video id'} webViewStyle={{ height:225, width:'100%', }} webViewProps={{ allowsInlineMediaPlayback: false, allowsFullscreenVideo: true, androidLayerType: 'hardware', }} /> </View>

[anandparmar-quark]

In my case, removing android:hardwareAccelerated="false" from the AndroidManifest.xml resolves the issue.