an HTML attribute for the iframe tag
  1. Welcome
  2. Examples
    1. CSS
    2. iframe
    3. React
    4. Vimeo
    5. YouTube
  3. Errors
  4. Anecdotes


  1. querySelectorAll()
  2. Questions LLC


The allowfullscreen attribute is used to enable fullscreen mode for an HTML element, such as a <iframe> or <video> element. The attribute can be added to the HTML element like so:

<iframe src="" allowfullscreen></iframe>

You can also set the attribute using JavaScript:

document.getElementById("myiframe").allowFullscreen = true;

CSS can also be used to control the appearance of the element while in fullscreen mode. For example, to hide the element's controls while in fullscreen mode:

iframe::-webkit-full-screen { /* styles here */ }

Additionally, you can use :fullscreen pseudoclass to target the element when it is in fullscreen mode:

iframe:fullscreen { /* styles here */ }

You can also listen to the fullscreenchange event on the document to detect when the element enters and exits fullscreen mode.

document.addEventListener("fullscreenchange", function(event) { if (document.fullscreenElement) { console.log("Element entered fullscreen mode."); } else { console.log("Element exited fullscreen mode."); } });

It's important to note that not all browsers support the fullscreen API and the allowfullscreen attribute, so you may want to provide a fallback or alternative for users on older browsers.