References

Beginner-friendly references for web development, with live, editable examples.

The HTML allowfullscreen attribute

Attribute All modern browsers Updated
In short

The HTML allowfullscreen attribute lets the page inside an <iframe> go fullscreen. Embedded video players need it for their fullscreen button, since it allows requestFullscreen() in the frame. It is a boolean attribute that grants the permission to any origin, and MDN now calls it a legacy form of allow="fullscreen *".

Overview

The allowfullscreen attribute gives an embedded page permission to switch into fullscreen mode. Put it on an <iframe> and the framed document can call requestFullscreen(), which is how an embedded video player makes its fullscreen button work.

Fullscreen is a permissions policy feature whose default allowlist is self, so a cross-origin embed such as a video host's player is blocked unless the iframe grants it. allowfullscreen grants it to every origin, which the Permissions Policy spec describes as adding an allowlist of * for the fullscreen feature.

The newer way to write this is the allow attribute. allow="fullscreen" limits the permission to the origin in the iframe's src by default, while allowfullscreen covers any origin. When allow already names fullscreen, the older attribute has no effect.

Two more rules catch people out. A frame cannot grant fullscreen that its own page is not allowed to use, and adding or removing the attribute after the frame has loaded changes nothing until the frame navigates again. MDN's compatibility data also notes that Safari on iPhone does not offer element fullscreen at all.

Syntax

<iframe src="https://player.example.com/embed/42" title="Product demo video" width="560" height="315" allowfullscreen></iframe>

Values

Value
A boolean attribute: present or absent.

Example

Live example 
<iframe title="Frame with allowfullscreen" sandbox="allow-scripts" allowfullscreen width="180" height="60"
  srcdoc="<button onclick='document.body.requestFullscreen().catch(e => this.textContent = e.name)'>Go fullscreen</button>"></iframe>
<iframe title="Frame without allowfullscreen" sandbox="allow-scripts" width="180" height="60"
  srcdoc="<button onclick='document.body.requestFullscreen().catch(e => this.textContent = e.name)'>Go fullscreen</button>"></iframe>
<p>Both frames are sandboxed, so each counts as a cross-origin embed. Only the first frame can go fullscreen. The second shows the error name instead. Press Esc to exit.</p>

Best practices

  • Add allowfullscreen or allow="fullscreen" to every iframe that embeds a cross-origin video player, or its fullscreen button will fail.
  • Prefer allow="fullscreen" in new code, because it limits the permission to the frame's own origin instead of every origin.
  • Write the attribute with no value. allowfullscreen="true" is invalid HTML, and allowfullscreen="false" still allows fullscreen.
  • Drop webkitallowfullscreen and mozallowfullscreen, since MDN's compatibility data shows the unprefixed attribute has worked since Chrome 38, Firefox 18 and Safari 10.1.
  • Give the iframe a descriptive title, such as the name of the video, so screen reader users know what the frame holds.

Accessibility

The allowfullscreen attribute only sets a permission for the framed page. For screen reader users, W3C technique H64 uses the iframe's title to label the frame for WCAG 4.1.2, so they can tell which frame to enter.

Inside the frame, the player's fullscreen control still needs a clear name and keyboard support. That part belongs to the embedded page, since the parent page cannot change markup inside a cross-origin frame.

Frequently asked questions

What does allowfullscreen do in an iframe?
The allowfullscreen attribute lets the framed page enter fullscreen with requestFullscreen(). Without it, or an allow attribute that names fullscreen, a cross-origin embed such as a video player cannot go fullscreen.
Is it valid to write allowfullscreen with a value of true?
No, allowfullscreen is a boolean attribute, and the HTML Standard does not allow true or false as values. Write it with no value, or with an empty value.
What is the difference between allowfullscreen and the allow attribute?
The allowfullscreen attribute grants fullscreen to any origin. The allow attribute with the fullscreen feature grants it only to the origin in the iframe src by default, and it wins when both are present.
Why does the allow attribute take precedence over allowfullscreen?
The Permissions Policy spec gives the allow attribute priority. It says allowfullscreen has no effect when allow already names fullscreen and keeps allowfullscreen only for compatibility with existing uses, so keep just one of them.
Do I still need webkitallowfullscreen and mozallowfullscreen?
No, the prefixed forms of allowfullscreen are no longer needed. MDN's compatibility data lists support for the unprefixed attribute since Chrome 38, Edge 12, Firefox 18 and Safari 10.1.
allow alt