How to use Fullscreen API

HTML5 comes bundled with a large number of new APIs. One of them is the Fullscreen API, which provides a native way for the browser to display the web page in full screen for the user.
And the good news is that the Fullscreen API is very easy to use.

Methods

Methods included in Fullscreen API

According to the W3C standard , the name of some methods has been changed, but the old names continue to work.

Element.requestFullscreen() 

This method allows one element to go to full screen mode.

 Document.getElementById("myCanvas").requestFullscreen() 

Running this code will cause the canvas with the ID “myCanvas” to go into fullscreen mode.

 Document.cancelFullScreen() 

new attribute name:

 Document.exitFullscreen 

Cancels fullscreen mode.

 Document.fullScreen 

new attribute name:

 Document.fullscreenEnabled 

Returns true if the user is in full screen mode.

 Document.fullScreenElement 

Returns the item that is currently in full screen mode.
Please note that these are standard methods. In order for them to work in all browsers, we need to use prefixes.

Supported browsers

• Chrome
• Firefox
• Safari
• Opera Next
• Opera (since version 12.10)
• Internet Explorer (since version 11)

More detailed information on support for the Fullscreen API by modern browsers is available here .
')
It will be useful script to automatically determine browser support Fullscreen API and, if necessary, add the necessary prefix to the methods of Fullscreen API.

Run fullscreen mode

First we need to figure out which method our browser recognizes. To do this, we will create a function that will check for method support and call the working method:

 function fullScreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.webkitrequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.mozRequestFullscreen) { element.mozRequestFullScreen(); } } 

If any of the requestFullscreen methods return a true value, then the method that is supported by a specific browser and uses the pseudo-class with its prefix is ​​called.

After that, you need to call the function for full-screen mode:

 //   var html = document.documentElement; fullScreen(html); 

 //      var canvas = document.getElementById('mycanvas'); fullScreen(canvas); 

The result will be a request to the user asking to allow the transition to full-screen mode, if the user allows the transition, all the toolbars in the browser will disappear, and the entire screen will be a web page or one element.

Cancel Full Screen

This method also requires prefixes, so we will use the same idea to test browser support for methods. Create a function that will determine which prefix we should use depending on the user's browser.

This method does not require any parameters, because, unlike the requestFullscreen method, it always applies to the entire document.

 function fullScreenCancel() { if(document.requestFullscreen) { document.requestFullscreen(); } else if(document.webkitRequestFullscreen ) { document.webkitRequestFullscreen(); } else if(document.mozRequestFullscreen) { document.mozRequestFullScreen(); } } 

 //   fullScreenCancel(); 

CSS pseudo-classes

CSS pseudo-classes came with this JavaScript API

 :full-screen 

It can be used to style any item on a web page when the page or item is in full screen mode. This pseudo-class can be useful for setting the size of page elements, because in full-screen mode the browser workspace itself is enlarged.

 :-webkit-full-screen {/*WebKit, Opera 15+*/ font-size: 16px; } :-moz-full-screen {/*FireFox*/ font-size: 16px; } :full-screen {/*Opera 12.15-, Blink, w3c standard*/ font-size: 16px; } /*   img*/ :-webkit-full-screen img { width: 100%; height: 100%; } :-moz-full-screen img { width: 100%; height: 100%; } 

Note that you cannot separate prefixes with commas, because the browser will not be able to recognize them:

 /*     */ :-webkit-full-screen img,:-moz-full-screen img { width: 100%; height: 100%; } 

In order for the styles to be applied correctly, you must place each pseudo-class with a browser prefix in its own block.

Conclusion

This JavaScript API is one of the least known of those shipped with HTML5, but it is an effective and easy-to-implement method that allows the user's attention to be focused on one element, which is especially useful for video, images and games.