Fullscreen API

By  on  

As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit fullscreen when desired.  Here's how to use this incredibly simple API!

Launching Fullscreen Mode

The fullscreen API's requestFullscreen method is still prefixed in some browsers, so you'll need to do a bit of searching to find it:

// Find the right method, call on correct element
function launchIntoFullscreen(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 fullscreen for browsers that support it!
launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("videoElement")); // any individual element

Simply call the request method on the element you'd like to receive fullscreen and the window morphs to fullscreen, requesting that the user allow fullscreen mode.  Remember it's plausible that the user will reject fullscreen mode.  If fullscreen mode is accepted, the toolbars and general chrome go away, making the document frame span the entire width and height of the screen.

Exiting Fullscreen Mode

The exitFullscreen method (also prefixed in older browsers) morphs the browser chrome back into standard layout:

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

// Cancel fullscreen for browsers that support it!
exitFullscreen();

Note that exitFullscreen is called on the document object only -- not needing to pass the individual element itself.

Fullscreen Properties & Events

Unfortunately the events and properties are still prefixed, but will be unprefixed over time.

  • document.fullScreenElement: the element which has been pushed to fullscreen.
  • document.fullScreenEnabled:  notes if fullscreen is current enabled.

The fullscreenchange event lets us know when we go to/from fullscreen mode:

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

You can detect which browser-prefixed event to use along with the initial fullscreen method detection.

Fullscreen CSS

Browsers do provide us one helpful bit of fullscreen CSS control:

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

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

In some cases, WebKit needs a bit of help, so the code above should be kept handy if you're dealing with media.

The fullscreen API is super simple and super useful.  I first saw this API used with MDN's BananaBread demo, an all-client-side first person shooter, a perfect excuse to go fullscreen.  The fullscreen API provides a way to enter and exit fullscreen mode, as well as an event to detect fullscreen state change, so all bases are covered.  Keep this nice API in mind for your future ventures -- it may come in handy!

Recent Features

Incredible Demos

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

Discussion

  1. maxw3st

    I think the fullscreen API could be a great thing, if properly used. For instance, offering a full screen option accompanying an HTML5 video or slideshow element. As long as it’s accompanied by a similar exit fullscreen option that’s also readily available to the user.

    I’m afraid advertisers will use it as a way to automatically put the user into full screen mode with no option to exit.

  2. It works well in OS X. It uses the same full screen application UI as native applications, where you can revert it to being windowed by mousing over the top edge of the screen and clicking the button in the menu bar.

  3. jinah

    in OSX, Chrome 22.

    document.fullScreenEnabled is: undefined

    • Correct, each browser doesn’t support each property yet, prefixed or not.

    • PM5544

      Hi Jinah and David,

      Ran into this myself and saw that Chrome uses the webkitFullscreenEnabled and webkitFullscreenElement and Firefox uses mozFullScreenEnabled and mozFullScreenElement.
      The difference is the casing of the “S” in “screen”.

    • PM5544

      I see that Almir posted this already :)

  4. This is very nice site for learn

  5. Is there any way to detect if full screen is enabled via css? Or are we forced to sniff in Javascript and set a className somewhere?

  6. Just one little correction:

    Google Chrome v.23 (actual) doesn’t implement webkitFullScreenElement and webkitFullScreenEnabled. It implements webkitFullscreenElement and webkitFullscreenEnabled (with lower case ‘S’). I can’t understand WHY they do that =P

  7. Gnappo

    Is there any way to launch full screen on page load?
    something like:

    jQuery(document).ready(function(){
        //launch fullscreen code
    })
    
    • Will
      window.addEventListener('load', function fullscreen() {
        //launch fullscreen code
      }, false);
      
    • This still won’t work, as calling requestFullscreen outside of a user interaction is an error.

    • No. By design, you can only enter full-screen mode in the event handler of a user interaction.

  8. Nedudi (Dmitry)

    Hi, David!
    Nice article, just a small notice:

    var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;
    var fullscreenEnabled = document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled;

    is wrong :)
    please change with:

    var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
    var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;

    thanks ;)

  9. Jobin

    Hello, How can i make it possible page onload ?

    • Add an onload listener? You have to seek user permission at some point though.

    • prem

      I am not getting the way to use this onload.. do anyone have sample code… thx in advance

  10. Ambuj

    Hey David

    I am facing an issue that while Full Screen Mode is ON then if i will press down ESC key then next time for Full Screen I need click couple of times at Full screen Button and in another case If i will get down exit from Full screen Mode without Pressing ESC key then it will work properly in a single click.

    please suggest me or give me way out.

    • Ambuj

      Hi Guys

      I found Solution of my Problem

      We just need to add below line in existing Code

        document.getElementById('enter-exit-fs').onclick = enterFullscreen;
      
      //Old Code
      // Called whenever the browser exits fullscreen.
      function onFullScreenExit() {
        console.log("Exited fullscreen!");
      };
      
      //New  Code Will be
      // Called whenever the browser exits fullscreen.
      function onFullScreenExit() {
        console.log("Exited fullscreen!");
        document.getElementById('enter-exit-fs').onclick = enterFullscreen;
      };
      
  11. Clement Yap

    When using, , what should the correct for the document, if not from the same page? ie; open the page for the first time in the full screen.

  12. Clement Yap

    I mean When using “body tag… onload=”launchFullscreen(document.documentElement) …/ body tag”

  13. Sathya

    Hi ,

    I am developing a new website, in which am expanding the size of my video using webkitrequestfullscreen, so while closing the full screen, i have to resize the video to my previous size. if i perform this using fullscreen button on my website, its working properly, but if i use the popup coming on top of the browser to close the full screen, my video is not getting resized. please guide me, what should i do.?

  14. Balazs

    I use chrome 26 for testing my software. I built in this fullscreen api. When the document is in fullscreen, it seems to be inactive: it does not get any keyboard event, even the input fields do not work.

  15. $('html').on('click keypress', 'a', function(event) {
    
      // Prevent navigation to legit link
      event.preventDefault();
      event.stopPropagation();
    
      // Trigger fullscreen
      if (elementPrototype.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (elementPrototype.webkitRequestFullScreen) {
        document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (elementPrototype.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else {
        // fail silently
      }
    
      // Show fake OS and browser UI
      $('#menu, #browser').show();
    
      // Show fake target site
      $('#target-site').show();
    });
    
  16. If you have any idea about disable esc button using javascript

  17. I find it difficult to use html code above him can you help me. I am still a newbie.

  18. Is there a way to hold the fullscreen when changing pages? Like how the browser functions when using keyboard shortcuts?

    • Andrew Loiacono

      I would like to know this as well. Normal fullscreen browser shortcuts keep fullscreen while changing pages. However, this API does not seem to offer the same capabilities.

    • Joe Z

      Hi Andrew
      Did you get an answer to this? We have a system we want to run in fullscreen once the user enables it – currently when you click on other pages the fullscreen mode collapses and doesn’t stay enabled.
      Thanks
      Joe

    • Andrew Loiacono

      Hi Joe

      Unfortunately I have not found a solution to this. It seems to be the limit of the API. When it comes to building web applications. I think the solution is to build a one page web app, using a framework of choice. This gives the illusion of switching pages but everything stays on index.html and fullscreen will continue to work. I know that it is a lot of work and make not make sense in all cases, but I think that is where I’m heading for future projects.

      -Andrew

  19. i can’t call the request method on the element to receive fullscreen and the window morphs to fullscreen. can you help me. i am a still newbie.

  20. Clement Yap

    Hi I am successful using FF Full Screen API. Also I am able to make changes to button whenever I toggle the screen. However, I am not able to make changes to looks, whenever I pressed ESC. I tried implementing keyup event but it does not work. I am using dojo.

    var toggled = true;
        						function toggle()
    								{
        								toggled ? launchFullscreen(document.documentElement) : cancelFullscreen();
        								btnFS.set("iconClass", toggled ? "icon_FSsmall" : "icon_FSlarge");
        								btnFS.set("label", toggled ? "Reset to Normal Screen" : "Set to Full Screen");
        								toggled = !toggled;
        								console.debug(toggled);
    								}
    			
    							var btnFS = new Button
    								({
    									label:"Set to Full Screen",
    									iconClass:'icon_FSlarge',
    									onClick:function()
    										{
    											toggle();
    										}
    								}, "node_btnFS")
    							btnFS.startup();
    
    
    
    on(document,"keyup", function(event)
        						{	
    								console.debug(toggled);
    								if (event.keyCode = 27)
    								{
    									btnFS.set("iconClass", "icon_FSlarge");
        								btnFS.set("label", "Set to Full Screen");
    								}
    							});
    
    

    Pls advise
    Thanks
    Clement

  21. Anusha

    Does this work if my div tag displays DOJO table? I am not able to get full screen for it.

    • Technically it should, unless Dojo’s squashing the event somehow.

  22. Mahks

    If the user selects “remember decision” at the fullscreen prompt, is there any way to access this setting?

    On subsequent page load:
    If they had selected Block (and remember), then I do not want to force them to see the prompt.

  23. Hi David,

    Excellent ! I spent at least 3 hours to refer Fullscreen API documents but i got confused, I couldn’t create a Fullscreen button to work on my Joomla website. But, i had a nice day with your guides and your codes. Wow ! I’m really excited now !

  24. Albert

    can you please create a workable downloadable script of your demo for users?

  25. Hello !

    is it possible to use with a wordpress website ?

    thankyou !

    • Yep! It’s just a bit of JavaScript code and can be used anywhere.

  26. *claps* I this is very creative and works very well on my mac.

  27. Hi David,

    I just tried this, but there is an issue, maybe you know of it.

    It seems it’s only possible to do this via an onclick event? e.g. I cannot just run launchFullScreen(document.documentElement); in my console or in some code callback code.

    Regards,

    Frodo

  28. rud

    Actually I looked into the fullscreen API a while ago and stumbled upon this https://github.com/sindresorhus/screenfull.js
    I’m using it for a couple weeks in production, and it seems to work well so far..

  29. NicholasBG

    This css…

    :-moz-fullscreen

    doesn’t work and should be this…

    :-moz-full-screen

    Also your FF full screen demo works to go into full screen mode but not to get out of it.

  30. Deepu

    Need help to use the fullscreen at document load or document ready etc.

    I see this working only with onclick event binded.

    Thanks in advance , Pls comment with suggestions and Help .

  31. Scott

    This works great, but text input is disabled… How do you enable it?

  32. Hi David, will this possible to use it on blogspot blog? I would like to have this on my blog..

  33. When I go to fullscreen mode in the gallery on ‘Commercial’ page, the menu bleeds through onto the fullscreen screen. How can I fix this?

  34. You should add element.webkitEnterFullscreen. I’ve tested on Android Galaxy Note 10.1. It has no methods above. I found only webkitEnterFullscreen method.

  35. Mano

    What is full screen element for IE 8 browser. Anybody can help me?

  36. Praveeen

    Fullscreen mode exits while i navigate to different html page of my mobile web app. How can i handle this?

  37. Thea Ganoe

    This is a good working example…thanks so much…I will be using this a lot to make web apps that look like native apps.

  38. Theik

    There’s a problem with your code:

    function launchFullscreen(element) {
    //.....
    }
    
    // Launch fullscreen for browsers that support it!
    launchFullScreen(document.documentElement); // the whole page
    

    This will give a javascript error in any browser that uses case-sensitive function names (launchFullScreen vs launchFullscreen)

  39. Siska Meijer

    I was wondering if it’s possible to open a new page in full screen from a link.
    All the examples here and on other scripts I’ve found are setting the current page or an element on the page to fullscreen.
    I’ve got a list of links that open popups, but with certain ones it would be preferable if they open in fullscreen.

  40. Awesome tutorial! This works like a champ if anyone is looking to do this.

  41. Kd

    Hey David,

    Thanks for the example. This works great. But it disables the tooltip for my Viz. How can I show it?

  42. mona

    i need a function for exiting the full screen how i can handle it?

  43. mary

    Hello,
    when I use screenfull.toggle(document.documentElement) – in IE11 I can’t vertically scroll like I can in Chrome and FF for example. How to solve this problem?

  44. Dzintars

    After fullscreen in i loose my background pattern. When out of fscr – pattern is fine.
    Any ideas?

  45. Quote from the post: “””
    document.fullScreenEnabled: notes if fullscreen is current enabled.
    “””

    In fact, fullScreenEnabled “Reports whether or not full-screen mode is available” (Ref: https://developer.mozilla.org/en-US/docs/Web/API/Document/mozFullScreenEnabled)
    So even if you’re not in full screen mode, document.fullScreenEnabled will report true.
    Might as well change the language in the post so that it doesn’t confuse future readers. Otherwise, an awesome post. Helped a lot. Thanks!

  46. Krish

    I am trying to use this api in .net project with telerik controls. Goal is to make the Radgrid to show up in Full screen. This works fine but found some features not working. When user tries to click on the column header – filter menu shows up in normal page mode – but not in FULL Screen mode.

    If you have any suggestions please let me know. I am using IE11 .

  47. Roman

    I followed your example exactly, compared everything from your demo, but it doesn’t work. It tries to launch the full-screen for a split second and then goes right back. Do you think some of my existing CSS could have some sort of a conflict?

  48. Hi David!

    Thanks for another awesome post!
    I used it on one of my projects and I needed to add support to IE11, and I had to edit a little bit your code, here it is:

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

    As you can see, I had to add “msExitFullscreen”, since the other functions didn’t worked.

    Thanks again!
    Andres

  49. Gitesh Purbia

    Hi, Can i disable exitFullScreen functionality with ESC button. I don’t want ESC button work on fullscreen mode for exit fullscren. Because if i had open any modal on fullscreen mode, and i press esc key to close that opened modal, that fullscreen gets exit.

  50. Unfortunately this produces full screen minus the Windows Taskbar, so I wonder if anyone can shed any light on this matter.

  51. Chris Veness

    I believe requestFullscreen() / exitFullscreen() return promises (at least seems to be the case in Chrome 73, Apr 2019), so probably would best be used with await or .then() – though if there’s no code relying on the full-screen state, it probably doesn’t make much difference.

  52. Does anybody know exactly since when it started returning a Promise in Chrome?

    MDN still shows that Chrome doesn’t support it as a promise: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen#Browser_compatibility

    But in my experiments it does. However MDN only talks about Chrome 71.

    Here somebody said it didn’t work in the past in Chrome either: https://stackoverflow.com/questions/52051547/requestfullscreen-is-not-returning-a-promise

    Finding the exact change would be very useful.

  53. I’ve made a PR to MDN to fix the situation:

    https://github.com/mdn/browser-compat-data/pull/4404

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!