How to allow youtube video to be expanded on mobile MI 8 SE?

Question

I have an app made in React-Note that there is a video embedded in a webview. A client complained that she can not expand the youtube video on the full screen of her mobile phone, I took the model and actually the expand button is semi-transparent with no option to click and expand, the video was embedded in this format:

<iframe class="my-video" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" src="https://www.youtube.com/embed/P4dT-lW9260" oallowfullscreen msallowfullscreen webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Here in the emulator you can see the icon, but it seems not to be enabled to click:

This is the code where the webview is loaded:

const getURL = `/path/pagina-etc/index.html`;

Excerpt from the webview:

return (
    <>
      <StatusBar backgroundColor={'#7fd233'} />
      <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
        <WebView
          style={{flex: 1}}
          source={{uri: getURL}}
          onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
          onNavigationStateChange={navState => {
            canGoBack.current = navState.canGoBack
          }}
          javaScriptEnabledAndroid
          ref={webViewRef}
          mixedContentMode={'compatibility'}
          allowsInlineMediaPlayback={true}
          javaScriptEnabled
          domStorageEnabled
          onMessage={_onMessage}
          injectedJavaScript={jsLib}
          onError={evt => {
            navigation.goBack()
            alert('Desculpe houve um erro ao carregar o conteúdo')
          }}
          onHttpError={evt => {
            navigation.goBack()
            alert('Desculpe houve um erro ao carregar o conteúdo')
          }}
          startInLoadingState
          renderLoading={() => {
            return (
              <View
                style={{
                  position: 'absolute',
                  width: '100%',
                  height: '100%',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <ActivityIndicator size='large' color='#43d41f' />
              </View>
            )
          }}
          thirdPartyCookiesEnabled
          sharedCookiesEnabled
        />
      </SafeAreaView>
    </>
  )