Facebook Video Embed API allowfullscreen=false не работает, из-за чего функция .play() выдает ошибку

Я пытаюсь встроить видео из Facebook на свой мобильный сайт и использую их API видео задокументировано здесь, чтобы сделать это.

Я инициализировал видеоплеер, как описано, и создал кнопки «Воспроизведение и пауза» для управления видео, но когда я использую кнопку «Воспроизвести», я получаю сообщение об ошибке Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

Я пытался сделать data-allowfullscreen="false", но это, похоже, не работает, так как загруженный iframe содержит allowfullscreen="true" Посмотрите на изображение ниже, у меня оно ложно, но у загруженного iframe оно истинно

Загруженный iframe имеет allowfullscree=true, хотя я указал false в

Я использую React и сделал для этого простой компонент

import React, { Component } from 'react';
import { Container, Button } from 'react-bootstrap';

class Vidtest extends Component {

    handlePlayVideo = () => {
        window.my_video_player.play(); 
    }

    handlePauseVideo = () => {
        window.my_video_player.pause();
    }   

    render() {
        return(
            <React.Fragment>
                <div style={{position:"relative", width:"100%"}}>
                    <div id="video_div"
                    className="fb-video" 
                    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
                    data-width="500" 
                    data-allowFullScreen="false"
                    >
                    </div>
                    <Button className="btn btn-primary" onClick={this.handlePlayVideo}>Play Video</Button>
                    <Button className="btn btn-primary" onClick={this.handlePauseVideo}>Pause Video</Button>
                </div>
            </React.Fragment>
        );
    }
}

export default Vidtest

и инициализировал видеоплеер FB в моем index.html

<div id="root"></div>
let my_video_player
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{my-app-id}',
      xfbml      : false,
      version    : 'v7.0'
    });

    // Get Embedded Video Player API Instance

    FB.Event.subscribe('xfbml.ready', function(msg) {
      if (msg.type === 'video') {
        my_video_player = msg.instance;
        console.log(msg.id);
        console.log('my_video_player created lfakjd');
      }
    });
  };
</script>

<script 
  async 
  defer 
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_GB/sdk/debug.js#xfbml=1&version=v7.0&appId={my-app-id}&autoLogAppEvents=1">
</script>

Может кто-нибудь, пожалуйста, помогите мне решить проблему здесь.?

Я хочу воспроизвести видео с помощью my_video_player.play() и не позволять ему воспроизводиться в полноэкранном режиме.