Video not visible on Android

[butri71]

The player is launched by clicking on a thumbnail in my React Native app (I'm using Expo) and works perfectly fine in iOs.
As soon as I click the video loads and starts playing as expected.

On Android, everything works the same but I can only hear the sound therefore the video is played but it is not visible.

Are you aware of any issues? Any recommended fixes?

Thanks

[LonelyCpp]

Hello @butri71

I've written a small tutorial here - link. It uses a modal to display the video player, and it works perfectly well.

Could you show some code snippets on how exactly you've implemented your modal?

[butri71]

Hi @LonelyCpp

I managed to make it work for Android using WebView.

The UI is not great compared to your native solution (on iOS looks fantastic) and I don't seem to have a lot of flexibility like autoplay or fullscreen.

Maybe I'm not experience enough with WebView.

This is my code within the Modal...

<WebView mediaPlaybackRequiresUserAction={true} style={{ height: 240, width: 320, alignSelf: "center", alignContent: "center", }} source={{ uri: https://www.youtube.com/embed/${props.videoKey}?rel=0`,
}}
/>`

Thanks

[alexwasner]

Also having this issue on a Pixel 3a running Android 10. I'm using videoId instead of uri

[LonelyCpp]

@butri71 @alexwasner

Here's a sample screen with the video in a modal. Try it and let me know if it works. (video on a modal is a major feature of this library, I want it to work flawlessly)

Tested on a oneplus 5 running android 10.

import React, {useState} from 'react';
import {
  SafeAreaView,
  View,
  Button,
  StyleSheet,
  Modal,
  Text,
} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <Button
        title="show modal with video"
        onPress={() => setModalVisible(true)}
      />
      <Modal
        transparent
        visible={modalVisible}
        onDismiss={() => setModalVisible(false)}
        onRequestClose={() => setModalVisible(false)}
        animationType={'slide'}>
        <View style={styles.container}>
          <View style={styles.modalContainer}>
            <Text>This is a player in a modal</Text>
            <YoutubePlayer play={true} height={200} videoId={'AVAc1gYLZK0'} />
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    padding: 20,
    backgroundColor: 'grey',
    width: '100%', // IMPORTANT if modal container has alignItems: 'center'
  },
});

export default App;

I believe you guys are trying to place the player in a container with style set to -

 justifyContent: 'center',
 alignItems: 'center',

In this case, the webview is incorrectly rendered in android (a limitation of the android webview unfortunately). A set width value, or width: '100%', should do the trick!

[aryella-lacerda]

This just happened to me as well. Everything worked well on iOS, but on Android I could only hear the audio but not see the video once I pressed play. This happened both on emulators and on physical devices.

After much trial and error, I realized I was setting the androidHardwareAccelerationDisabled prop in webViewProps. The react-native-webview docs explain that this property is deprecated and has been replaced by androidLayerType. Setting this prop to hardware solved my problem.

<Youtube
	height={height}
	width={width}
	videoId={'hjqs-eIlvBE'}
	initialPlayerParams={{
		controls: true,
	}}
	webViewStyle={{
		height,
		width,
	}}
	webViewProps={{
		allowsInlineMediaPlayback: false,
		allowsFullscreenVideo: true,
		androidLayerType: 'hardware', // <- SOLUTION
		// androidHardwareAccelerationDisabled: true, // <-- PROBLEM
	}}
/>

[sidVaidya]

@butri71 found any solution for the issue ? i am facing the same issue in android the video is not showing up only the audio plays

[butri71]

@sidVaidya I don't have a problem with the video or sound. i believe @aryella-lacerda have found a solution to your problem, check her answer above.

I have a problem when watching the video in a fullscreen mode, the screen suddenly blurs (like adding a transparent layer on top) but video keeps playing normally. I'm wrapping my player in a Modal though.

[anandparmar-quark]

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

[bayramn]

Thank You!!! @aryella-lacerda. androidLayerType: 'hardware' did the trick and saved the day!

[russelRajitha]

This just happened to me as well. Everything worked well on iOS, but on Android I could only hear the audio but not see the video once I pressed play. This happened both on emulators and on physical devices.

After much trial and error, I realized I was setting the androidHardwareAccelerationDisabled prop in webViewProps. The react-native-webview docs explain that this property is deprecated and has been replaced by androidLayerType. Setting this prop to hardware solved my problem.

<Youtube
	height={height}
	width={width}
	videoId={'hjqs-eIlvBE'}
	initialPlayerParams={{
		controls: true,
	}}
	webViewStyle={{
		height,
		width,
	}}
	webViewProps={{
		allowsInlineMediaPlayback: false,
		allowsFullscreenVideo: true,
		androidLayerType: 'hardware', // <- SOLUTION
		// androidHardwareAccelerationDisabled: true, // <-- PROBLEM
	}}
/>

worked for me.