W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
  background-color: yellow;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open this page in fullscreen mode.</p>
<button onclick="openFullscreen();">Go Fullscreen Mode</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<p id="myP">I will display the event that was fired!</p>

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem = window.top.document.body; //To break out of frame in IE
    elem.msRequestFullscreen();
  }
}

/* Function to close fullscreen mode */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    window.top.document.msExitFullscreen();
  }
}

// Events
var output = document.getElementById("myP");
document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
  output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
  output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
  output.innerHTML = "msfullscreenchange event fired!";
});
</script>

<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>#myP {  background-color: yellow;  padding: 20px;  font-size: 30px;}</style></head><body>​<h2>Fullscreen with JavaScript</h2><p>Click on the button to open this page in fullscreen mode.</p><button onclick="openFullscreen();">Go Fullscreen Mode</button><button onclick="closeFullscreen();">Close Fullscreen</button><p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p><p id="myP">I will display the event that was fired!</p>​<script>/* Get the element you want displayed in fullscreen */ var elem = document.documentElement;​/* Function to open fullscreen mode */function openFullscreen() {  if (elem.requestFullscreen) {    elem.requestFullscreen();  } else if (elem.mozRequestFullScreen) { /* Firefox */    elem.mozRequestFullScreen();  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */    elem.webkitRequestFullscreen();  } else if (elem.msRequestFullscreen) { /* IE/Edge */    elem = window.top.document.body; //To break out of frame in IE    elem.msRequestFullscreen();  }}​/* Function to close fullscreen mode */function closeFullscreen() {  if (document.exitFullscreen) {    document.exitFullscreen();  } else if (document.mozCancelFullScreen) {    document.mozCancelFullScreen();  } else if (document.webkitExitFullscreen) {    document.webkitExitFullscreen();