React Native - How to stop hidden videos in iOS opening full screen in react-native-webview?

Question

I am rendering a html page from a CMS(content management system) in react-native-webview. The html has a video and for mobile they are hiding it using display:none, it works on android. But in iOS the video is opening in full screen even if the enclosing div component has display:none.

I want to hide this video in web-view. After a research I have used allowsInlineMediaPlayback={true} in web view and playsInline in video tag it is worked.

Questions

1. For me the content is coming from CMS and authored by another team. I dont have any control over there to add playsInline in video tags. How do I achieve hiding video?
2. Why the enclosing div display:none is not working? is there a way to not to display using html properties in that div level?

import { SafeAreaView } from "react-native";
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <WebView
                   source={{
                    html: '<div style="display:none;"><video autoplay src="https://www.w3schools.com/html/mov_bbb.mp4" ></video></div>'
                }}
                originWhitelist={['*']}

          allowsInlineMediaPlayback={true}
        />
      </SafeAreaView>
    );
  }
}```