Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/pompom454/tea/llms.txt

Use this file to discover all available pages before exploring further.

The Fullscreen API wraps the browser’s native Fullscreen API with a consistent interface for entering and exiting fullscreen mode, toggling it, querying its state, and attaching event handlers for change and error events. Because browser support varies, always check Fullscreen.isEnabled() before making a request.
Fullscreen requests must be initiated by the player via a direct interaction (click or touch). You cannot call Fullscreen.request() or Fullscreen.toggle() from code that runs automatically—for example, in a passage’s body or a PassageHeader passage. Attach a button or link that triggers the request.

​
Fullscreen.element

A getter that returns the element currently displayed in fullscreen mode, or null if fullscreen is not active.
​
returns
HTMLElement | null
The current fullscreen element, or null when not in fullscreen mode.
// Get the element currently shown in fullscreen.
const el = Fullscreen.element;

​
Fullscreen.isEnabled()

Returns whether fullscreen mode is both supported by the browser and currently enabled (not blocked by permissions policy or other constraints). 
Fullscreen.isEnabled()
​
returns
boolean
true if fullscreen is available, false otherwise.
if (Fullscreen.isEnabled()) {
  /* fullscreen is available; safe to make requests */
}

​
Fullscreen.isFullscreen()

Returns whether fullscreen mode is currently active. 
Fullscreen.isFullscreen()
​
returns
boolean
true if the browser is currently in fullscreen mode, false otherwise.
if (Fullscreen.isFullscreen()) {
  /* story is currently fullscreen */
}

​
Fullscreen.request()

Requests that the browser enter fullscreen mode. Returns a Promise that resolves when the browser has entered fullscreen, or rejects if the request fails. 
Fullscreen.request([options [, requestedEl]])
​
options
object
A fullscreen options object. Pass null or omit to use defaults.
​
options.navigationUI
string
default:"\"auto\""
Controls the browser’s navigation UI in fullscreen. Valid values:
  • "auto" — no preference (browser decides)
  • "hide" — request that navigation UI be hidden; full screen dimensions are used
  • "show" — request that navigation UI be visible; element dimensions are clamped to leave room
Browsers are not required to honor this setting.
​
requestedEl
HTMLElement
The element to display in fullscreen. Defaults to the entire page when omitted.
​
returns
Promise
A Promise that resolves on success or rejects on failure.
Fullscreen.request();

​
Fullscreen.exit()

Requests that the browser exit fullscreen mode. Returns a Promise that resolves once the browser has exited fullscreen. 
Fullscreen.exit()
​
returns
Promise
A Promise that resolves on success or rejects on failure.
Fullscreen.exit();

​
Fullscreen.toggle()

Requests that the browser toggle fullscreen mode: enters fullscreen if not active, exits if active. Returns a Promise. 
Fullscreen.toggle([options [, requestedEl]])
​
options
object
A fullscreen options object. See Fullscreen.request() for the full options reference.
​
requestedEl
HTMLElement
The element to use when entering fullscreen. Defaults to the entire page when omitted.
​
returns
Promise
A Promise that resolves on success or rejects on failure.
Fullscreen.toggle();

​
Fullscreen.onChange()

Attaches a handler function for fullscreen change events. The handler is called whenever the browser enters or exits fullscreen mode. 
Fullscreen.onChange(handlerFn [, requestedEl])
​
handlerFn
Function
required
The function to invoke when the fullscreen state changes. Receives the event object as its argument.
​
requestedEl
HTMLElement
The element to attach the handler to. Defaults to the document when omitted.
Fullscreen.onChange(function (ev) {
  /* fullscreen mode changed, so do something */
});

​
Fullscreen.offChange()

Removes fullscreen change event handlers previously attached with Fullscreen.onChange(). 
Fullscreen.offChange([handlerFn [, requestedEl]])
​
handlerFn
Function
The specific handler function to remove. If omitted, all change handlers are removed.
​
requestedEl
HTMLElement
The element to remove the handler(s) from. Defaults to the document when omitted.
Fullscreen.offChange();

​
Fullscreen.onError()

Attaches a handler function for fullscreen error events, called when a fullscreen request or exit fails. 
Fullscreen.onError(handlerFn [, requestedEl])
​
handlerFn
Function
required
The function to invoke when a fullscreen error occurs. Receives the event object as its argument.
​
requestedEl
HTMLElement
The element to attach the handler to. Defaults to the document when omitted.
Fullscreen.onError(function (ev) {
  /* fullscreen mode encountered an error */
});

​
Fullscreen.offError()

Removes fullscreen error event handlers previously attached with Fullscreen.onError(). 
Fullscreen.offError([handlerFn [, requestedEl]])
​
handlerFn
Function
The specific handler function to remove. If omitted, all error handlers are removed.
​
requestedEl
HTMLElement
The element to remove the handler(s) from. Defaults to the document when omitted.
Fullscreen.offError();

​
Fullscreen backgrounds

When using fullscreen mode with custom backgrounds, place background styles on the body element rather than the html element. 
body {
  background: #111 fixed url("images/background.png") center / contain no-repeat;
}
Do not place background properties on the html element in addition to body. Doing so can cause background jitter in some browsers when scrolling outside of fullscreen mode.
If you set a background image using the background shorthand property, always include a background-color value as well (either within the shorthand or as a separate property immediately after). The background shorthand resets the background color, and without an explicit color, the browser’s default may show through if the image does not cover the full viewport.

Build docs developers (and LLMs) love

Get started for freeTalk to us