CODEWITHSUNDEEP
iosreactjsvideo
Formition
Formition

Reputation: 31

Issue with IOS playing html hero background video in full screen media player. Html within a react Website displaying on React Native WebView on iOS

Problem:

React Website has component with a Video background that is muted, autoplay, loop and this has worked fine for every device until recently.

We have a react native app that has a simple webview (react-native-webview) and on iOS when this webpage is loaded with the video element, it pops it up in a separate media player.

I've tried all settings I could think of and nothing tells the native iOS device (iPhone X) from opening this background video in a separate media player, looking for solutions to prevent it. But not wanting to block the native app from loading videos in future too.

<video alt="second slide" class=" hero--video " autoplay loop muted playsinline id="html5_video_vgqpodxt0jc2113" style="max-width: 100%; height: auto; width: 100%;">
<source src="https://mition.blob.core.windows.net/mition/PRODUCTION/media/World%20-%201992.mp4" type="video/mp4" /> 
 Sorry, your browser doesn't support embedded videos.
</video>

Upvotes: 1

Views: 525

Answers (1)

Adam Katz
Adam Katz

Reputation: 6964

The react-native webview can add the following code to prevent it from popping out

        mediaPlaybackRequiresUserAction={false}
enter code here

However I am facing a seperate issue that it doesnt play at all in background

Upvotes: 0

Related Questions