Partial Outageshare-external
Missing Fullscreen Button in Embedded Facebook Video Player on iOS and Android using React Native WebView
1

I'm embedding a Facebook video player within a React Native application using react-native-webview. The player loads and plays as expected, but the fullscreen button does not appear on either iOS or Android. I’ve enabled the data-allowfullscreen attribute, but the button still doesn’t show.

The goal is for the player to have a fullscreen option on both platforms, allowing users to expand the video to full screen. I've tested several configurations, but without success. Here’s the relevant code snippet:

const facebookHTML = `
  <!DOCTYPE html>
  <html>
  <body>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : ......, 
          xfbml      : true,
          version    : 'v21.0'
        });

        FB.Event.subscribe('xfbml.ready', function(msg) {
          if (msg.type === 'video') {
            window.my_video_player = msg.instance;
            var my_video_player = msg.instance;

            my_video_player.subscribe('startedPlaying', function() {
              window.ReactNativeWebView.postMessage('play');
            });
          }
        });
      };
    </script>
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous"
          src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v21.0"></script>
    <div id="videoContainer" class="fb-video" data-href="${facebookUrl}" data-allowfullscreen="true"
        data-width="2000" >
    </div>
  </body>

  </html>
  `;

return (
  <View style={styles.container} onLayout={onLayout}>
    <WebView
      ref={webViewRef}
      originWhitelist={['*']}
      source={{html: facebookHTML, baseUrl: 'https://www.facebook.com'}}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowsFullscreenVideo={true}
      allowsInlineMediaPlayback={true}
      style={[styles.webView, {height: videoHeight}]}
      onMessage={onMessage}
      scrollEnabled={false}
    />
  </View>
);
Marwa
Asked about a week ago