Tiny Fullscreen API Helper With jQuery - full-screen-helper.js

A cross-browser HTML5 fullscreen API helper which allows to display any DOM elements or the whole document in fullscreen mode. Can be implemented in jQuery or Vanilla JavaScript.

How to use it:

1. To use the plugin, you first need to load the following JavaScript and CSS files in the document.

<link rel="stylesheet" href="full-screen-helper.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="full-screen-helper.js"></script>

2. Set a given element to fullscreen:

$('body').fullScreenHelper('request');

3. Exit the fullscreen mode.

$('body').fullScreenHelper('exit');

4. Toggle the fullscreen mode.

$('body').fullScreenHelper('toggle');

5. Event listener.

$(document).on("fullscreenchange", function () {
  if ($.fullScreenHelper("state")) {
    console.log("In fullscreen", $(":fullscreen"));
  } else {
    console.log("Not in fullscreen");
  }
});

Changelog:

2020-11-22

• v1.0.5

2020-09-12

• v1.0.4

2017-11-09

• v1.0.2

2017-06-18

• Improvements and npm

---

This awesome jQuery plugin is developed by brcontainer. For more Advanced Usages, please check the demo page or visit the official website.