How to Use Fullscreen in JavaScript

Use the browser’s Fullscreen API to request full-screen mode for a chosen element, exit it with document.exitFullscreen(), and watch fullscreenchange to keep the interface in sync. Call the request from a user action such as a button click, and handle its promise because the browser can reject the request.

Understanding the Full-Screen API

Full-screen mode applies to an element, such as a video player, game, presentation, or a page container. The browser exposes the active element as document.fullscreenElement; it is null when no element is in full-screen mode. The Fullscreen API is controlled by the browser, so a request can be unavailable or denied depending on the user action, browsing context, and device.

For method and event details, see MDN’s Fullscreen API documentation.

Method 1: Using requestFullscreen() to Enter Full-Screen Mode

Select the element to expand and call requestFullscreen() in response to a click. The Fullscreen API requires a secure context, typically HTTPS. It may be unavailable if the page is not in a secure context or the method is missing; a request may also be denied when it is not triggered by a user gesture or the browsing context or device does not permit it. The following page fragment is a static browser example; its API behavior depends on the browser and is not represented as runtime output.

<button id="enter-fullscreen">Enter full screen</button>
<button id="exit-fullscreen">Exit full screen</button>
<div id="player">Video or other content</div>
<p id="status" role="status"></p>
<script>
const enterButton = document.getElementById('enter-fullscreen');
const exitButton = document.getElementById('exit-fullscreen');
const player = document.getElementById('player');
const status = document.getElementById('status');

enterButton.addEventListener('click', async () => {
  if (typeof player.requestFullscreen !== 'function') {
    status.textContent = 'Full-screen mode is unavailable.';
    return;
  }

  try {
    await player.requestFullscreen();
  } catch (error) {
    status.textContent = 'The browser did not enter full-screen mode.';
  }
});

exitButton.addEventListener('click', async () => {
  if (!document.fullscreenElement) return;
  try {
    await document.exitFullscreen();
  } catch (error) {
    status.textContent = 'The browser did not exit full-screen mode.';
  }
});

document.addEventListener('fullscreenchange', () => {
  const active = document.fullscreenElement === player;
  status.textContent = active
    ? 'Player is full screen.'
    : document.fullscreenElement
      ? 'Another element is full screen.'
      : 'Full-screen mode has ended.';
  enterButton.disabled = active;
  exitButton.disabled = !document.fullscreenElement;
});
</script>

The browser example above uses a real DOM element. This separate example uses a stand-in to show the promise flow and the message returned after the request completes. Run this example:

const element = {
  requestFullscreen: () => Promise.resolve()
};

async function enterFullscreen(target) {
  await target.requestFullscreen();
  return 'Full-screen request completed';
}

enterFullscreen(element).then(console.log);

Full-screen request completed

In your page, keep the request inside the click handler so it follows a user gesture. Do not rely on vendor-prefixed methods as a guarantee of support; check for the standard method and leave the rest of the interface usable if it is missing or the promise rejects. If the API appears unavailable, also confirm that the page is served in a secure context, typically HTTPS.

Method 2: Exiting Full-Screen Mode with exitFullscreen()

Call document.exitFullscreen() to leave full-screen mode. It returns a promise, so handle rejection just as you do for entry. Users can also leave through browser or device controls; your interface should reflect that change rather than assuming only its own exit button can end the mode.

For example, in a browser page, attach a click handler to an exit button and call document.exitFullscreen() when document.fullscreenElement is present. Catch a rejected promise and show a useful status message. The exact browser interaction is not executed by this static description.

Method 3: Handling Full-Screen Change Events

Listen for fullscreenchange on document. The event fires when full-screen state changes, including when the user exits with browser controls. Read document.fullscreenElement each time: a non-null value identifies the current full-screen element, while null means full-screen has ended. Use that state to update button labels, status text, or other controls. CSS’s :fullscreen pseudo-class can style an element while the browser displays it in full-screen mode.

Conclusion

Use requestFullscreen() on the chosen element from a user action, handle its promise, and use document.exitFullscreen() when providing an exit control. Track fullscreenchange and document.fullscreenElement so the interface also responds to exits initiated outside the page. Browser and device behavior can vary, so keep a usable non-full-screen path.

FAQ

1. How can I check whether an element is in full-screen mode? Check whether document.fullscreenElement is that element. It is null when no element is active.

2. Can any element enter full-screen mode? The API accepts an element, but browser policy and the surrounding browsing context can affect whether a request succeeds. Request it from a user action and handle failure.

3. Why might requestFullscreen() fail? The method may be unavailable, including when the page is not in a secure context, typically HTTPS. A request may also lack a user gesture or be denied for the current browsing context or device. Check availability and handle the returned promise.

4. How can I style full-screen content? Use the CSS :fullscreen pseudo-class for styles that apply while an element is in full-screen mode.