Simple JavaScript Plugin To Make Html Elements Fullscreen – screenfull.js

Preview:

Description:

screenfull.js is a vanilla JavaScript library to bring any HTML elements into fullscreen by using the JavaScript Fullscreen API. Works with all the modern browsers like IE7/8/9/10, Chrome, Firefox, Safari and more.

Basic Usage:

Install and download.

# NPM
$ npm install screenfull --save

Import the screenfull.js in your document.

<script src="dist/screenfull.min.js"></script>

Make the page or an element fullscreen.

if (screenfull.isEnabled) {
  screenfull.request(element);
} else {
  // do something
}

Hide navigation UI on mobile devices.

if (screenfull.isEnabled) {
  screenfull.request(element, {navigationUI: 'hide'});
}

Exit the fullscreen mode.

screenfull.exit().then(function () {
  console.log('Browser exited fullscreen mode')
});

Toggle the fullscreen mode.

if (screenfull.isEnabled) {
  screenfull.toggle(event.target);
}

Event handlers.

if (screenfull.isEnabled) {
  screenfull.on('error', event => {
    console.error('Failed to enable fullscreen', event);
  });
}
if (screenfull.isEnabled) {
  screenfull.on('change', () => {
    console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
  });
}

Pass FullscreenOptions to the screenfull.request function.

screenfull.request(element, options);

Changelog:

v6.0.2 (06/19/2022)

• Support running in server environments

v6.0.1 (01/16/2022)

• Fix .isEnabled TypeScript type

v6.0.0 (11/03/2020)

• This package is now pure ESM.If you cannot easily move to ESM. Just stay on version 5.2.0. It’s stable and fine.
• This package now uses modern JavaScript syntax. If you need support for older browsers, you need to transpire the code with Babel.
• A minified version is no longer provided in the package. It’s better to minify your project as a whole in your own build step.
• screenfull.element is now undefined instead of null when there’s no fullscreen element.

v5.1.0 (12/24/2020)

• Add support for options

v5.0.2 (08/06/2020)

• Rename screenfull.enabled to screenfull.isEnabled
• Drop Safari 5.1 (it’s ancient) workaround
• Unify checking for fullscreen availability
• Previously, you had to check if (screenfull && screenfull.enabled) {} before using it. Now you just use if (screenfull.isEnabled) {}.

v5.0.0 (09/09/2019)

• Return the native promise when it exists

v4.2.1 (07/31/2019)

• Properly forward promise rejections

v4.1.0 (03/29/2019)

• Bugfix