html5-fullscreen

Old JS Fullscreen code no longer working. "requestFullscreen is not a function" error

EDIT: An answer is accepted below, but for anyone who ends up in my position, the main issue was that firefox temporarily enabled full-screen-api.unprefix by default, and then changed that in an update so that a prefix was once again necessary. Also, if you search about:config for "fullscreen" it won't show "full-screen-api."

Some code I have been using for a long time to fullscreen webpages using js no longer works.

I've checked the mdn (https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen) and nothing appears to have changed, but for some reason I can no longer full screen a website in any of my browsers (I've tested Chrome, Firefox, and Firefox Developer Edition).

Further, the error I'm given is not one of permissions, but that requestFullscreen does not appear to exist as a function.

TypeError: document.body.requestFullscreen is not a function

Is something big going on that I just don't know about? Is this perhaps related to my OS? It's very odd that old code (document.body.requestFullscreen()) which worked in all my browsers no more than 6 months ago now works in none.

Also, I've tested it where I use it most and fullscreen does still work for things like youtube or the built in bits <video> tags.

#test {
  height: 100px;
  width: 100px;
  background: orange;
}
<button onclick="document.body.requestFullscreen()">Fullscreen document.body</button>

<button onclick="document.documentElement.requestFullscreen()">Fullscreen document.documentElement</button>

<button onclick="document.documentElement.requestFullscreen()">Fullscreen Test Div</button>

<div id="test">Test Div</div>

Solution

  • Update: Three years later and the feature is no longer experimental. Prefixes are only needed for Internet Explorer and Safari in 2020.

    As per the browser support section of the MDN documentation:

    This is an experimental feature.

    Chrome only supports it with the webkit prefix. Firefox only supports it if you turn on the full-screen-api.unprefix.enabled preference in the browser. Internet Explorer only supports it with the ms prefix.