How to Make the Window Full Screen with Javascript

Quick Sample Code

// element which needs to enter full-screen mode
var element = document.querySelector("#container");

// make the element go to full-screen mode
element.requestFullscreen()
	.then(function() {
		// element has entered fullscreen mode successfully
	})
	.catch(function(error) {
		// element could not enter fullscreen mode
	});

Tutorial in Detail

Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button.

It is also possible to make a specific element in the page to enter and exit full-screen mode programmatically using Javascript Fullscreen API.

This tutorial discusses the methods, properties and events available in the Fullscreen API.

Example of Fullscreen API

Javascript FullScreen API

The Fullscreen API provides functions to enter and exit full-screen mode, as well as an event to detect full-screen state change.

Also specific CSS can be applied to an element that goes in full-screen mode.

• Element.requestFullscreen function can make an element go to full-screen mode.
• document.exitFullscreen function can exit full-screen.
• document.fullscreenElement property holds the element which is currenly in full-screen.
• fullscreenchange event can detect when element enters and exits full-screen mode.
• fullscreenerror event can detect errors when entering and exiting full-screen mode.
• document.fullscreenEnabled property tells whether full-screen can be enabled in the current page or not.
• :fullscreen and ::backdrop CSS properties handle styling when element enters full-screen.

Going Into Full-Screen

• We can request an element in the page to go into full-screen using the Element.requestFullscreen function. Element refers to the DOM element.

  This function is asynchronous, and returns a Promise. The Promise is resolved when the element successfully enters full-screen mode. The Promise is rejected if an error occurs.

  // DOM element which needs to enter fullscreen mode
  var element = document.querySelector("#container");
  
  element.requestFullscreen()
  .then(function() {
  	// element has entered fullscreen mode successfully
  })
  .catch(function(error) {
  	// element could not enter fullscreen mode
  	// error message
  	console.log(error.message);
  });
  

• By default, the browser navigation UI will be hidden in full-screen mode. However it is possible to keep the navigation UI in fullscreen mode also, by using the navigationUI parameter.

  document.querySelector("#container").requestFullscreen({ navigationUI: "show" })
  .then(function() {
  	
  })
  .catch(function(error) {
  	
  });
  

  navigationUI parameter can have 3 values :

  1. "hide" : Hide the browser navigation UI
  2. "show" : Show the browser navigation UI
  3. "auto" : The default behaviour applied by browser

Exiting Full-Screen

We can exit full screen using the document.exitFullscreen function. Note that this function is not called on the element, but rather the document object.

This also is an asynchronous function, and returns a Promise. The Promise is resolved when the element exits full-screen mode and rejected in case of an error.

document.exitFullscreen()
.then(function() {
	// element has exited fullscreen mode
})
.catch(function(error) {
	// element could not exit fullscreen mode
	// error message
	console.log(error.message);
});

Check Which Element is in Full-Screen

We can assign many elements in your page to use full-screen mode. However we might want to know which element is currently being displayed in full-screen mode. document.fullscreenElement is a read-only property that returns the DOM Node of that element.

If the page is not in full-screen mode, null is returned.

// Returns the DOM Node of the element which is in full-screen
// Returns null if no element in full-screen

var full_screen_element = document.fullscreenElement;

Check Whether Full-Screen Activated Currently

To find out whether full-screen is currently activated, we can find the element which is in full-screen. If such an element is found, it means full-screen is activated, otherwise full-screen is deactivated.

var full_screen_element = document.fullscreenElement;
	
// If no element is in full-screen
if(full_screen_element !== null)
	console.log('FullScreen mode is activated');
else
	console.log('FullScreen mode is not activated');
}

Event to Detect Full-Screen State Changes

fullscreenchange event detects change in full-screen mode. This event can be applied to the document or to specific elements.

document.addEventListener('fullscreenchange', function() {
	var full_screen_element = document.fullscreenElement;

	if(full_screen_element !== null)
		console.log('Page has entered fullscreen mode');
	else
		console.log('Page has exited fullscreen mode');
	}	
});

var element = document.querySelector("#container");

element.addEventListener('fullscreenchange', function() {
	if(document.fullscreenElement !== null)
		console.log('Element has entered fullscreen mode');
	else
		console.log('Element has exited fullscreen mode');
	}	
});

Check Whether Full-Screen is Allowed in the Page

Sometimes due to restrictions placed, it may not be possible to enter full-screen mode for the current page. The document.fullscreenEnabled property returns a boolean true or false indicating whether full-screen is available or not.

if(document.fullscreenEnabled)
	console.log('Full screen is available');
else
	console.log('Full screen is not available');

CSS for Elements in Full-Screen

When an element enters full-screen mode, specific CSS styles can be applied to them.

The :fullscreen CSS pseudo class can be used to style elements when they enter full-screen mode.

/* applied for all elements that go to fullscreen */
:fullscreen { 
	/* CSS properties */
}

/* applied for specific element */
#container:fullscreen { 
	/* CSS properties */
}

/* Safari */
:-webkit-full-screen {
	
}

/* Safari */
#container:-webkit-full-screen {
	
}

When an element enters fullscreen, it may have a default black backdrop. The ::backdrop CSS pseudo-element can be used to customize element's backdrop styles.

/* backdrop for specific element when it enters fullscreen */
#container::backdrop { 
	/* CSS properties */
}

Browser Compatibility for Full-Screen API

Javascript Full-screen API is available for all major browsers, with some exceptions :

• Safari does not return a Promise when entering and exiting full screen mode.
• Safari does not support ::backdrop CSS.
• Safari does not support :fullscreen CSS. It supports the prefixed non-standard :full-screen CSS.