However we might want to know which element is currently being displayed in full-screen mode. We can assign many elements in your page to use full-screen mode. element could not exit fullscreen mode The Promise is resolved when the element exits full-screen mode and rejected in case of an error. This also is an asynchronous function, and returns a Promise. Note that this function is not called on the element, but rather the document object. We can exit full screen using the document.exitFullscreen function. 'auto' : The default behaviour applied by browser.'show' : Show the browser navigation UI.'hide' : Hide the browser navigation UI.NavigationUI parameter can have 3 values : document.querySelector('#container').requestFullscreen() However it is possible to keep the navigation UI in fullscreen mode also, by using the navigationUI parameter. element could not enter fullscreen modeīy default, the browser navigation UI will be hidden in full-screen mode.

element has entered fullscreen mode successfully Var element = document.querySelector('#container') DOM element which needs to enter fullscreen mode The Promise is rejected if an error occurs. The Promise is resolved when the element successfully enters full-screen mode. This function is asynchronous, and returns a Promise. We can request an element in the page to go into full-screen using the Element.requestFullscreen function.

:fullscreen and ::backdrop CSS properties handle styling when element enters full-screen.

document.fullscreenEnabled property tells whether full-screen can be enabled in the current page or not.

fullscreenerror event can detect errors when entering and exiting full-screen mode.

fullscreenchange event can detect when element enters and exits full-screen mode.

document.fullscreenElement property holds the element which is currenly in full-screen.

document.exitFullscreen function can exit full-screen.

Element.requestFullscreen function can make an element go to full-screen mode.The Fullscreen API provides functions to enter and exit full-screen mode, as well as an event to detect full-screen state change.Īlso specific CSS can be applied to an element that goes in full-screen mode. Full Screen Mode Disabled Enable Full Screenĭownload Example Codes Javascript FullScreen API

How to escape full screen mode