Browser Fullscreen APIs

Even though I have used browser fullscreen APIs from time to time in some of my projects, I was still unaware of some of the details.

That's why I've compiled some useful code snippets below.

Prefixed methods and objects

According to caniuse the fullscreen API in Safari is still prefixed. It is necessary to prefix the method name with webkit; so in Safari you have to call e.g. element.webkitRequestFullscreen() instead of element.requestFullscreen().

I use the following helper function to call the correct method or access the correct object in each browser:

Open element in fullscreen

The requestFullscreen() method can be used to open an element in fullscreen mode.

The method has an optional options parameter which allows to specify whether browser navigation elements are shown or not (exceptions: Firefox and Safari).

The method returns a Promise allowing you to react to the switch of fullscreen mode, and e.g. execute code after the switch (exception: Safari).

Close fullscreen mode

The document.exitFullscreen() method closes the fullscreen mode. Keep in mind that exitFullscreen is a method of the document object, not the element object.

The document.exitFullscreen() also returns a Promise (exception: Safari).

Detect fullscreen mode

The object document.fullscreenElement contains a reference to the element that was opened in fullscreen mode. In Safari this object is prefixed: document.webkitFullscreenElement (exception Safari on iPhone: this object does not exist here).

Events

When opening or closing the fullscreen mode, the fullscreenchange event is fired. In Safari, the event name is prefixed with webkitfullscreenchange.

Example

In the following example I included all code snippets