How to enable full screen in JavaScript

Enabling full screen in Javascript

We can use the requestFullscreen() method on any element to make an element full screen. This method makes an asynchronous request for the element to be displayed in full-screen mode.

We will be using 2 methods, 2 properties, and 1 event to implement this full-screen functionality.

  • requestFullscreen – changes to full screen
  • exitFullscreen – exits from full screen
  • document.fullscreenElement – checks if any element is already in full screen mode
  • document.fullScreenEnabled – checks if the current page has permission to show elements in full page mode
  • fullscreenchange – event will be triggered on full screen to enter and exit

Function to enable full screen

function enterFullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  }else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();     // Firefox
  }else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();  // Safari
  }else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();      // IE/Edge
  }
};

Function to exit full screen

We can call the exitFullScreen method to exit full screen mode.

function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};

Let’s create a page with a video and a “go-to full-screen” button. Upon clicking the button, the video should be played in full screen.

<html>
 <head>
 </head>
 <body>
    <video id="videoElement" width="400" height="250" controls="true" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4"></video> 
    <button id="full_screen">Go full screen</button>
 </body>
</html>

Our script has:


function enterFullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  }else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();     // Firefox
  }else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();  // Safari
  }else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();      // IE/Edge
  }
};

let btn = document.getElementById("full_screen");
btn.addEventListener("click", function(){
  let videoEle = document.querySelector('video');
  enterFullScreen(videoEle);
});

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    console.log('Entered fullscreen:', document.fullscreenElement);
  } else {
    console.log('Exited fullscreen.');
  }
});

Code

This is the complete implementation.

Here, the Go full screen button will not show the expected result because it is blocked on our platform.

Free Resources

Attributions:
  1. undefined by undefined
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)