Why does setting the allowfullscreen attribute of an iframe doesn't seem to keep the attribute

Question

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

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

However when I check the page my iframe does not have the property allowfullscreen:

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

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

Solution

See the documentation.

React is case sensitive, the attribute is called allowFullScreen, not allowfullscreen. It is also a boolean attribute so true is not a valid value for it.

<iframe src="http://example.com" frameborder="0" width="960" height="569" allowFullScreen></iframe>

see a live demo

Comments

[MichaelGofron]

It seems to work correctly! However, this seems strange to me as the mozilla documentation on iframe explicitly says that it is all lowercase: developer.mozilla.org/en/docs/Web/HTML/Element/iframe

[Quentin]

@MichaelGofron — It does not say it is all lowercase, it gives an example of it and uses all lowercase for that example. HTML attribute names are case insensitive. React is not HTML. React is case sensitive. React tends to use camelCase.

[MichaelGofron]

For anyone who needs a full list of attributes in React you can find it here: facebook.github.io/react/docs/tags-and-attributes.html

[Quentin]

@MichaelGofron — Yes, I linked to that in the first line of this answer…

[sanjay chaudhary]

My Iframe is from different origin, so i am not able to make full screen even after apply your solution, is there any limitation for cross origin ?

[Take-Some-Bytes]

I voted down because this is not an answer.

[PrashoonB]

Sorry @Take-Some-Bytes, now I have written a more clear answer. Thank you.