CODEWITHSUNDEEP
javascriptiframereactjs
MichaelGofron
MichaelGofron

Reputation: 1410

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

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: pre editing

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?

Upvotes: 7

Views: 33289

Answers (1)

Quentin
Quentin

Reputation: 944296

See the documentation.

JSX, which React uses for generating DOM, is case sensitive. It's attributes are named after DOM properties, not HTML attributes (although many DOM properties are named after HTML attributes).

The attribute is called allowFullScreen, not allowfullscreen. It is also a boolean attribute so ”true” is not a valid value for it (the string will be cast to the boolean true, but so would the string "false").

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

see a live demo

Upvotes: 25

Related Questions