Back to News
Web

Using the Fullscreen API without gestures

The Fullscreen API⁠ offers a JavaScript interface to add immersive experiences to your websites and web applications. When activated, fullscreen mode presents your content in center stage—extending over the entire screen—without the distractions of the browser and operating system UI.

Why go fullscreen?

Fullscreen mode improves user experience in a few critical ways:

  • Focus: Eliminate distractions and draw attention to your content.
  • Presentation: Present slideshows, videos, games, and other interactive experiences.
  • Space: Maximize available screen real estate, especially useful on smaller devices.
  • Additional keyboard shortcuts: Offer select keyboard shortcuts that are only available in fullscreen mode.

The Fullscreen API is widely supported⁠ across modern browsers and browser compatibility can be checked like so:

Implementing fullscreen the traditional way

Traditionally, entering fullscreen requires User Activation⁠ from a gesture, like a button click. That requirement is sensible in most cases, and generally aligns Fullscreen API use with user intent.

Example: Making a video fullscreen with a button

html
<button id="button">Enter Fullscreen</button>
<video id="video" src="your_video.mp4"></video>
<script>
  const button = document.getElementById('button');
  const video = document.getElementById('video');
  button.addEventListener('click', () => {
    if (navigator.userActivation.isActive) {
      video.requestFullscreen()
        .catch(e => console.error(e));
    }
  });
</script>

However, the user gesture requirement poses problems for sites that wish to open a new fullscreen window, make content fullscreen on multiple screens, or offer other immersive experiences⁠.

Gesture-free fullscreen with a new permission

A new Chrome Enterprise feature⁠ supports more advanced Fullscreen API use cases, by offering permission controls for trusted sites to enter fullscreen without a user gesture.

Enterprise administrators can set a new AutomaticFullscreenAllowedForUrls⁠ policy, which grants this permission to trusted origins. Users are also able to grant a new Automatic Fullscreen permission through the site settings pages of Isolated Web Apps⁠.

This feature is initially limited to enterprise-trusted sites and Isolated Web Apps. It may be available more broadly in the future.

Example: Checking for permission

Starting in Chrome 128, you can check if your site has permission to use the Fullscreen API without a user gesture.

javascript
try {
  const permissionStatus = await navigator.permissions.query(
  {name: 'fullscreen', allowWithoutGesture: true});
  
  if (permissionStatus.state == 'granted') {
    // Use fullscreen without navigator.userActivation.isActive
  } else {
    // Direct IWA users to chrome://settings permission controls
  }
} catch (error) {
  // Permission is not supported
}

Example: Opening a fullscreen popup

Sites with this permission are able to use more advanced windowing features, like opening a popup window and making it fullscreen on load.

javascript
const popup = window.open('./popup.html', '_blank', 'popup');
popup.addEventListener('load', () => {
  // Note: navigator.userActivation.isActive is not needed
  popup.document.documentElement.requestFullscreen()
    .catch(e => console.error(e));
});

Beyond the basics

Sites can combine progressive support for this new permission, Window Management API⁠ features, and settings to allow pop-ups⁠ without user gestures, to offer immersive multi-screen functionality that was not previously possible, like:

These enlightened windowing experiences are particularly useful for advanced web applications like presentation suites, remote desktop clients, point-of-sale systems, financial dashboards, and medical imaging tools.

Development tips

Integrate new features using progressive enhancement to optimize browser, policy, permission, and user activation configurations. Useful practices include:

More resources

For more comprehensive resources and examples, reference these helpful links: