Why does setting the allowfullscreen attribute of an iframe doesn't seem to keep the attribute
<p>In my code I am setting the allowfullscreen attribute of my iframe which is surrounded by SkyLight which is an npm module for modal views in react.js</p>

<pre><code>            &lt;SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog"&gt;
              &lt;iframe src=url frameborder="0" width="960" height="569" allowfullscreen="true"&gt;&lt;/iframe&gt;;
            &lt;/SkyLight&gt;
</code></pre>

<p>However when I check the page my iframe does not have the property allowfullscreen:
<a href="https://i.stack.imgur.com/BolLN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BolLN.png" alt="pre editing"></a></p>

<p>When I manually add the attribute <code>allowfullscreen="true"</code> in the console, however, the iframe can go full screen.</p>

<p>Does anyone know how to make sure the allowfullscreen attribute exists without manually adding it through the console?</p>