JavaScript controls the methods properties and events of the various browser full screen modes

//Judge the various browsers and find the right way
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
//Launch full screen!
launchFullScreen(document.documentElement); //The entire web page
launchFullScreen(document.getElementById("videoElement")); //  A page element 

Call the full screen method on the page element you want to display in full screen, and the browser window will become full screen, but the user will be asked to allow full screen mode first. Note that users are likely to reject full-screen mode. If the user is in full-screen mode, the browser's toolbar and other button menus are hidden, and your page covers the entire screen.

Exit full screen mode

This exitFullscreen method (which also requires a browser prefix) causes the browser to exitFullscreen mode and return to normal mode.

//Determine browser type
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
//Exit full screen mode!
exitFullscreen();

It is important to note that exitFullscreen can only be called by the document object, not the object passed in when the full screen is started.

Full-screen properties and events

Unfortunately, methods associated with full-screen properties and events also require a browser prefix, but I'm sure that won't be necessary soon.

1. Document. FullScreenElement: full screen page elements.
2. Document. FullScreenEnabled: whether the current in a state of full screen.

The fullscreenchange event is triggered when starting or exiting the fullscreen:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

You can still prefix the event using the method above to determine the browser type.

Full-screen style CSS

Various browsers provide a very useful CSS style rule for full-screen mode:

:-webkit-full-screen {
  
}
:-moz-full-screen {
  
}
:-ms-fullscreen {
  
}
:full-screen { 
  
}
:fullscreen { 
  
}

:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

::backdrop {
  
}
::-ms-backdrop {
  
}

In some cases, WebKit styles can cause problems, and it's best to keep them simple.

These full-screen apis are super simple and super useful. The first time I saw this API was in the MDN's BananaBread demo, which was a shooting game that needed full screen, and it used event monitoring to detect full screen status. Keep in mind these great apis that you can use when you need them.