YouTube Embedded Video Shows Developer Options when Click Play Button on Android

user_8665976 0
Viewed 677

I am using embedded YouTube videos in my React Native Expo application. The embedded videos are inside a WebView from react-native-webview. I am having a bit of a weird problem and I am not sure if it is on the YouTube side or React Native side of things.

When I try to click the play button on Android, I get the developer options on the YouTube video. The video does not play and I cannot "click out" of these options.

What the YouTube Embedded Video looks like inside the WebView when I press play What happens when I click play

Even though I am clearly clicking in the center of the player on the play button, I get this menu. It seems like the Webview is either not responding well to user touch input or it thinks it is a longPress. I am not long pressing the video. When I strip my UI down to just the WebView taking up the entire screen, it works fine. On long press, I see this menu pop up. But clicking the play button everything works as expected.

It seems like once I reduce the size of the WebView (even though the YouTube player is not cut off or squished at all), it isn't responding properly. On iOS, everything is working fine.

Device Problem Occurs on When I started to test on the Samsung Galaxy S7, I noticed this problem. Running the application on a Google Pixel 3 emulator appears to work as expected.

Here is the simple WebView with embedded YouTube video in it.

<WebView
     allowsInlineMediaPlayback={true}
     source={{ uri: "https://www.youtube.com/embed/WOi0vnzcEzA?playsinline=1&rel=0&mute=1autoplay=1&fs=0" }}
 />

Thanks

youtube-iframe-api react-native webview android
1 Answers

I ended up figuring out what was going on. I hope this may help someone in the future.

My WebView was wrapped inside a TouchableWithoutFeedback. For some reason (it is probably correct behavior but over my RN capabilities), it was "blocking" proper user input into the WebView. After I moved the WebView outside of the TouchableWithoutFeedback, everything worked as expected.

user_86659760
Related