The FullScreenManager object offers a unified API for working with the experimental “fullscreen” mode of various modern browsers. As you may know, cross-browser differences complicate this matter. This library is an attempt at simplifying the developer’s job in this regard.

FullScreenManager allows the user to view an element (video, div, canvas, img, etc.) or the whole document in full screen without any visible UI elements (aka “browser chrome”).

Compatibility

The FullScreenManager library should work in Chrome 15+, Safari 5.1+, Opera 12.1+, Internet Explorer 11+ and Firefox 10+. It can also be manually enabled in Firefox 9 by setting fullscreen-api.enabled to true in about:config.

The FullScreenManager library is compatible with AMD (RequireJS). It can also be used standalone.

Usage

Linking to the library will automatically create an instance of the object and make it available under window.FullScreenManager. However, if you are using RequireJS, nothing will be declared under the window object. In this case, you should simply require the library as usual:

define(function (require) {
    var FullScreenManager = require('FullScreenManager');    
});

Full screen mode can only be triggered from within an event listener tied to a user interaction. In other words, it can only be activated as a result of a mouse or keyboard event.

For example, this code will listen for a click anywhere on the document and toggle full screen mode for the whole page:

document.documentElement.onclick = function() {
    FullScreenManager.toggle();
}

You can also specify which element should be made full screen. To do that, you simply pass the element or its id to the FullScreenManager.request() or FullScreenManager.toggle() method:

FullScreenManager.request("myElement");

You can also listen for events. For instance, if you wanted to do something after full screen mode was engaged, you could do that:

FullScreenManager.on('activation', onActivated);
 
function onActivated(e) {
    console.log("We are now in full screen mode!");
}

Caveat

By design, navigating to another page, changing tabs, reloading the page, or switching to another application will exit full screen mode.

To enter fullscreen mode from within an iframe, you need to add some attributes on the iframe tag.

<iframe src="x.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen></iframe>

The fullscreen API is still in eperimental mode. The W3C abandoned work on it in 2014 but the WHATWG still maintains a living standard at https://fullscreen.spec.whatwg.org/

Download and documentation

You can download the library right here or on GitHub. We also provide the full API documentation.