title: Facebook Video Embed API allowfullscreen=false doesn't work which makes .play() function throw error
body: <p>I am trying to embed facebook video on my mobile site and used their Video API <a href="https://developers.facebook.com/docs/plugins/embedded-video-player/api" rel="nofollow noreferrer">documented here</a> to do it.</p>
  
  <p>I have initialised the video player as described and created Play &amp; Pause buttons to control the video but when I use the Play button I get the error <code>Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.</code></p>
  
  <p>I have tried making <code>data-allowfullscreen="false"</code>
  but that doesn't seem to work as the iframe that is loaded contains <code>allowfullscreen="true"</code>
  Look at the image below, my  has it false but the loaded iframe has it as true</p>
  
  <p><a href="https://i.stack.imgur.com/B3nYz.png" rel="nofollow noreferrer">Loaded iframe has allowfullscree=true even though I gave false in </a></p>
  
  <p>I am using React and made a simple component for this</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Container, Button } from 'react-bootstrap';
  
  class Vidtest extends Component {
  
      handlePlayVideo = () =&gt; {
          window.my_video_player.play(); 
      }
  
      handlePauseVideo = () =&gt; {
          window.my_video_player.pause();
      }   
  
      render() {
          return(
              &lt;React.Fragment&gt;
                  &lt;div style={{position:"relative", width:"100%"}}&gt;
                      &lt;div id="video_div"
                      className="fb-video" 
                      data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
                      data-width="500" 
                      data-allowFullScreen="false"
                      &gt;
                      &lt;/div&gt;
                      &lt;Button className="btn btn-primary" onClick={this.handlePlayVideo}&gt;Play Video&lt;/Button&gt;
                      &lt;Button className="btn btn-primary" onClick={this.handlePauseVideo}&gt;Pause Video&lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/React.Fragment&gt;
          );
      }
  }
  
  export default Vidtest
  </code></pre>
  
  <p>and have initialized FB video player in my index.html</p>
  
  <pre><code>&lt;div id="root"&gt;&lt;/div&gt;
  let my_video_player
  &lt;script&gt;
    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');
        }
      });
    };
  &lt;/script&gt;
  
  &lt;script 
    async 
    defer 
    crossorigin="anonymous"
    src="https://connect.facebook.net/en_GB/sdk/debug.js#xfbml=1&amp;version=v7.0&amp;appId={my-app-id}&amp;autoLogAppEvents=1"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Can someone please help me resolve the issue here.?</p>
  
  <p>I want to play the video using my_video_player.play() and not allow it to play in fullscreen.</p>