HTML allowfullscreen Attribute

HTML allowfullscreen Attribute

The HTML allowfullscreen attribute allows content inside an <iframe> to enter fullscreen mode. It is a Boolean attribute and is equivalent to allowing the fullscreen feature through the iframe's Permissions Policy.

Syntax

The allowfullscreen attribute is placed in the opening <iframe> tag. Because it is a Boolean attribute, its presence enables the fullscreen permission.

<iframe src="page.html" allowfullscreen></iframe>

Attribute Value

The attribute does not require a value. Its presence represents the enabled state, while omitting the attribute represents the disabled state.

Elements That Use the allowfullscreen Attribute

The allowfullscreen attribute is currently valid on the <iframe> element.

Using the allowfullscreen Attribute

The following example gives the document inside the iframe permission to enter fullscreen mode:

<iframe src="page.html" allowfullscreen></iframe>

The attribute grants permission for fullscreen use, but it does not automatically place the iframe into fullscreen mode. The embedded content must still request fullscreen through the appropriate browser functionality.

Boolean Attribute

The allowfullscreen attribute is a Boolean attribute. In HTML, the presence of a Boolean attribute means the feature is enabled, regardless of whether a value is explicitly written.

<iframe src="page.html" allowfullscreen></iframe>

To disable the permission, remove the attribute entirely. Writing allowfullscreen="false" does not disable it because the attribute is still present.

allowfullscreen and allow

The allowfullscreen attribute is a legacy way of granting fullscreen permission to an iframe. The same permission can be expressed through the fullscreen directive of the allow attribute.

<iframe src="page.html" allowfullscreen></iframe>

<iframe src="page.html" allow="fullscreen"></iframe>

Both forms allow the embedded content to request fullscreen mode. The allow attribute is more flexible because it can define permissions for fullscreen along with other browser features.

Common Mistakes

Do not use allowfullscreen="false" to disable fullscreen permission. Because allowfullscreen is a Boolean attribute, its presence enables the permission.

<!-- Correct: fullscreen allowed -->
<iframe src="page.html" allowfullscreen></iframe>

<!-- Correct: fullscreen not explicitly allowed -->
<iframe src="page.html"></iframe>

Do not assume that allowfullscreen automatically makes the iframe fullscreen. It only permits the embedded content to request fullscreen mode.

Do not confuse allowfullscreen with the iframe's dimensions. The width and height attributes control the iframe's normal displayed size and do not determine whether fullscreen mode is permitted.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The allowfullscreen attribute on the <iframe> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the allowfullscreen Attribute

The example shows the allowfullscreen attribute on an iframe. Remove the attribute or replace it with allow="fullscreen" to compare the two forms of granting fullscreen permission.

Summary

The HTML allowfullscreen attribute is a Boolean attribute used on the <iframe> element to allow embedded content to request fullscreen mode. Its presence enables the permission, while omitting it disables that permission. Fullscreen permission can also be expressed using the fullscreen directive of the more flexible allow attribute.