fullscreen

Enter, exit, and observe fullscreen mode via the Fullscreen API.

Import: @rtorcato/browser-common/fullscreen

📖 MDN: Fullscreen API · 📊 caniuse: fullscreen

enterFullscreen must be called from a user gesture handler (e.g. a click listener) — browsers reject fullscreen requests made outside one.

Browser support

API	Chrome	Edge	Firefox	Safari	iOS Safari	Baseline
Element.requestFullscreen	✅ 71+	✅ 79+	✅ 64+	✅ 16.4+	◐ partial 16.4+ [1,2]	Limited
Document.exitFullscreen	✅ 71+	✅ 79+	✅ 64+	✅ 16.4+	◐ partial 16.4+ [1,2]	Limited

1. iOS Safari: Only available on iPad, not on iPhone.
2. iOS Safari: Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games.

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: Element.requestFullscreen · Document.exitFullscreen

Example

import {
  enterFullscreen,
  exitFullscreen,
  isFullscreen,
  onFullscreenChange,
} from '@rtorcato/browser-common/fullscreen'

button.addEventListener('click', () => enterFullscreen(video))

const off = onFullscreenChange(() => {
  console.log(isFullscreen() ? 'entered fullscreen' : 'exited fullscreen')
})

off()

Exports

• enterFullscreen(element?) — requests fullscreen for element (default: document.documentElement)
• exitFullscreen() — exits fullscreen if active
• isFullscreen() — true if currently in fullscreen
• onFullscreenChange(callback) — listens for fullscreen change; returns an unsubscribe function

See the API reference for full signatures.