Mozilla

Using the Fullscreen API in web browsers

One thing which has been very important when it comes to creating special end user experiences have been the ability to show something fullscreen, effectively hiding all the other content etc.

Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-)

Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen. That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element.

And now we can!

Requesting fullscreen

We now have access to a method called requestFullScreen, so far implemented in Firefox, Google Chrome, Safari and Internet Explorer. Therefore, to make it work at the moment, we need this code:

Please note that the Fullscreen standard in the W3C specification uses a lowercase ‘s’ in all methods, whereas Firefox, Google Chrome and Safari use an uppercase one.

What the code above does is just getting a reference to the documentElement and request for it to be displayed fullscreen. Naturally, you could also make just a certain element fullscreen, for instance, a video, with the same method called for the element you wish.

Cancelling fullscreen

If you want to cancel the fullscreen state, you need to call it on the document element:

Note here that there have been differences in this naming, and in some implementations it’s about exiting the state, in others cancelling it.

Detecting fullscreen state change

The user could, for instance, exit fullscreen, something that might be good for you to know. For that we have a fullscreenchange event, that you can apply both to the element that requested fullscreen, but also to the document. Then we just detect the fullscreen state and take act accordingly, like this:

92 comments

Comments are now closed.

  1. Rodrigo Ayala wrote on January 30th, 2012 at 10:57:

    Excellent!, I didn’t know anything about this feature, a great functionality to show fullscreen videos or play cool games using the whole screen.

    Note: the demo doesn’t work for me, but I didn’t read the part where you say that this will be supported since Firefox 10 (and I have FF9) xD…

    Great post Robert!, thanks a lot :)

    1. Robert Nyman wrote on January 30th, 2012 at 10:59:

      Indeed, it opens up a lot of interesting options! And thanks!
      Now go install a web browser version that you can try these in. :-)

  2. James wrote on January 30th, 2012 at 11:23:

    Two questions:

    1) Does the browser treat Fullscreen that came via a web page trigger any differently than if a user just went to the toolbar View > Full Screen?

    2) I’m not sure I understand the limiting of key strokes while in full screen mode. If you fullscreen a web page that has a text area in it, does that mean I can’t type in it? According to the MDN documentation for full screen (https://developer.mozilla.org/en/DOM/Using_full-screen_mode) “any alphanumeric keyboard input while in full-screen mode causes a warning message to appear”. I just full screened this web page (View > Full Screen) and am typing this message, yet do not see any ‘warning message’. Should I see one? Perhaps the answer to this is related to my first question.

    Thanks!

    1. Robert Nyman wrote on January 31st, 2012 at 02:41:

      Hi,

      1. Like Chris Pearce mentioned below, it treats keyboard input differently, and if you choose View > Full Screen in Firefox, you will see that the address bar is at the top, auto-hiding, whereas it’s not when called through code. Additionally, when used through the Fullscreen API, the user gets a notification it happened and that they can use the Esc to exit it.

      2. Right now, the warning that is referred to is the notification that you are in fullscreen mode and need to press Esc to leave it.

  3. marcusklaas wrote on January 30th, 2012 at 11:39:

    Cool! It works nicely in Chrome indeed. Question: does this also work on devices like iPad with iOS 5?

    1. marcusklaas wrote on January 30th, 2012 at 13:44:

      Also, is it required that this fullscreen code is excecuted in an eventListener? Does not seem to work when I execute it outside without a user generated event..

    2. Robert Nyman wrote on January 31st, 2012 at 02:42:

      No, it doesn’t work with iOS 5 yet. Maybe in the next update?

  4. André Luís wrote on January 30th, 2012 at 15:00:

    Cool writeup, Rob! And great to follow your writings here too, on the Mozilla site of things.

    Keep it up! And thanks. The support is already maturing nicely… so in the next few months this should become more common place.

    1. Robert Nyman wrote on January 31st, 2012 at 02:42:

      Thank you! :-)
      Good to see you here, and enjoy the API!

  5. Chris Pearce wrote on January 30th, 2012 at 18:17:

    @James: View > Fullscreen mode and HTML fullscreen mode treat key input differently in order to guard against phishing attacks; if evilsite.com goes fullscreen and renders something that looks like a Firefox UI with a paypal login screen, it could trick users into entering their username and password.

    @marcusklaas: fullscreen requests are only granted in user generated event handlers (mouse click and key press handlers). This way the user can be in control of when the site enters fullscreen, also to help guard against phishing attacks.

  6. Oliver Caldwell wrote on January 31st, 2012 at 08:19:

    Wrote a little wrapper class for the API. Did not want to go writing those if statements every time. https://gist.github.com/1710727

    1. Robert Nyman wrote on January 31st, 2012 at 09:53:

      Nice, thank you!

  7. John Dyer wrote on January 31st, 2012 at 15:15:

    A few people asked about iOS, so here’s the answer. On an iPad with a [video] element, you can call myvideo.webkitEnterFullScreen() to make the video exit the browser and play in iOS’s native player. Not that it’s “enter” not “request”.

    Robert, could you also cover the details about fullscreenEnabled in Firefox and how it different from Firefox 9 to 10?

    1. Robert Nyman wrote on February 1st, 2012 at 06:28:

      That is an option for iOS, yes, but not really as encompassing as the above API/approach is.

      With fullscreenEnabled, I’m not really aware of any differences since this was first properly initiated in Firefox 10. For further information, I recommend the MDN article on Fullscreen and Chris Pearce article on Fullscreen.

  8. Joe Shelby wrote on February 2nd, 2012 at 20:22:

    I’m not so sure “full screen” really makes sense in an IOS device (well, of the current crop – when the mac runs IOS directly, that may change things). The browser in an ipad/itouch/iphone (as well as in Android devices), is inherently already in full screen mode all the time. You don’t see borders. You don’t see windows, except through special UI elements to simulate them (such as Firefox for android’s off-screen left sidebar where everything is a ‘tab’). The most you could get out of it is an explicit request to hide the address bar which is normally shown whenever the window is smaller than the screen.

    1. Robert Nyman wrote on February 3rd, 2012 at 01:20:

      Yes, the benefit from it is not nearly as much as on desktop, but granted, it could still make the user experience better in some cases.

  9. kris wrote on February 9th, 2012 at 04:53:

    hey robert, great post. thanks for sharing!

    i m recently working on the same issue. does anyone know, if our lovely internet explorer will have something similiar?

    if you press “F11″ even internet explorer switches to fullscreen modus like every other browser. unfortunately you cannot fire a F11-keypress event via javascript due security reasons.

    1. John Dyer wrote on February 9th, 2012 at 06:58:

      I’ve spoken with the IE team and all they will say is that they don’t comment on features unless they are complete. In the mean time they want folks to know that windows 8 is fullscreen by default in Metro mode.

    2. Robert Nyman wrote on February 9th, 2012 at 12:16:

      Thanks! I’ve heard the same: it’s not clear if Microsoft will do it in IE10 or not.

  10. 40kg wrote on February 19th, 2012 at 23:16:

    It dosn’t work when I embed a flash in the html.
    Could you please explain me why?
    Thanks a lot!!

    1. Robert Nyman wrote on February 20th, 2012 at 01:43:

      In what way doesn’t it work? Nothing happens? Error message?
      And is this behavior consistent across web browsers with Fullscreen API support?

  11. 40kg wrote on February 20th, 2012 at 18:16:

    when I embed a flashgame into html like above, the fullscreen Api failed to work. If I set wmode=”opaque”, the API works while each time the browsers turn to fullscreen the flashgame restart unwanted…
    Could you please help me how to fullscreen browsers without restart flashgame? Thanks!O(∩_∩)O

    1. Robert Nyman wrote on February 21st, 2012 at 00:20:

      I’m not sure what the connection would be. However, if this problem persists, please file a bug.

    2. Toby wrote on March 8th, 2012 at 10:09:

      Ahurrrrr, this is a bug with Firefox, it will completely refresh (restart) any plugins that are contained within an element that changes its display type: https://bugzilla.mozilla.org/show_bug.cgi?id=90268

      Add generic comment on Mozilla not fixing this earlier – this bug has been a thorn in my love for FF.

      If you want to do fullscreen flash I would personally do that with flash itself, its one of the few advantages to using flash!

      1. Chris Pearce wrote on March 8th, 2012 at 14:52:

        @Toby: It’s your lucky day! Bug 90268 has been fixed in the upcoming Firefox 13 release. It took so long in part because it was such a tricky fix, and there was a lot of problems getting it to work with various vendors’ plugins.

        1. Robert Nyman wrote on March 9th, 2012 at 00:51:

          Great to hear!

        2. Toby wrote on March 12th, 2012 at 07:10:

          That is great news! It was a beast of a bug, yet sneaky still and tragically show stopping.

          Look forward to being able to make cool sites with plugin elements on screen as another element :`)

          Also, I completely forgot to say thanks Rob for the kickass writeup on fullscreen – seriously loving it, and hope to use it in the future!

          1. Robert Nyman wrote on March 12th, 2012 at 13:40:

            Thank you, very glad to hear you liked it!

  12. cpearce wrote on February 21st, 2012 at 13:58:

    @40kg: In Firefox10 we deny requests for fullscreen mode when a windowed plugin is present in the page on all platforms except MacOSX. This is for security reasons. In Firefox11 we switch to exit fullscreen when a windowed plugin is focused instead. So HTML fullscreen + flash are never going to work well. Flash already has a fullscreen mode, can you use that instead?

    1. Robert Nyman wrote on February 22nd, 2012 at 01:10:

      Interesting! Does that apply to just making the Flash fullscreen, or any element in a page that also contains Flash?

    2. 40kg wrote on February 22nd, 2012 at 02:24:

      When I use flash’s fullscreen mode, the keyboard event is disabled as security reasons. While my flash game need keyboard to play, so I wish a fullscreen by browsers. Is there any way to enable keyboard in fullscreen mode?Thank you( ⊙ _ ⊙ ).

      1. Robert Nyman wrote on February 22nd, 2012 at 02:26:

        This is covered ib the blog post under the title “Full screen with key input”.

  13. Front Row Tickets wrote on February 28th, 2012 at 08:41:

    Great information, it will be very helpful to us to get our ticket listings to full screen for our users when we want to.

    1. Robert Nyman wrote on February 28th, 2012 at 08:55:

      Good to hear!

  14. Gustav Evertsson wrote on March 5th, 2012 at 23:47:

    Pressing F11 seems not to trigger the fullscreenchange event even if the result is the same, the window is in fullscreen. Is there another event for the F11 fullscreen? I want to have an “View in fullscreen” buttom that I want to hide in fullscreen mode, both the mode triggered by F11 and the javascript requestFullscreen().

    1. Robert Nyman wrote on March 6th, 2012 at 01:01:

      No, the result isn’t the same. Depending on the web browser, there are different toolbars, warnings and also ways to exit fullscreen mode.

      This event only covers when fullscreen has been programmatically triggered.

      1. Gustav Evertsson wrote on March 6th, 2012 at 05:51:

        Okay, I can accept that it is two different modes with seperate implemenations even if I see them as overlapping.
        Do you know if it is possible to detect the F11 fullscreen? If it is not possible to get a seperate event for it would it be possible to maybe detect the changed window size and check if window and screen size is the same?

        1. Robert Nyman wrote on March 6th, 2012 at 05:53:

          Yes, comparing screen.width and window.innerWidth should work, but then you’d need to constantly poll that.

  15. Neel Mehta wrote on March 11th, 2012 at 17:52:

    This is awesome, Robert! One thing I noticed though is that when fullscreen is applied and my JS changes the background-image of the page, it seems the background image isn’t applied and all I get is a black background. Do you know why this is happening?

    1. Chris Pearce wrote on March 11th, 2012 at 18:02:

      Firefox applies a background:black rule to the fullscreen element. You should be able to override this, can you provide a link to a page where background-image isn’t working in fullscreen mode please?

    2. Robert Nyman wrote on March 12th, 2012 at 13:40:

      Thanks, glad you like it! Like Chris said, if you have a URL with the problem, please share it here.

  16. Sindre Sorhus wrote on April 22nd, 2012 at 07:16:

    I’ve created a simple wrapper for the Fullscreen API to smooth out the prefix mess and fix some inconsistencies in the different implementations.

    https://github.com/sindresorhus/screenfull.js

    1. Robert Nyman wrote on April 24th, 2012 at 15:03:

      Thanks!

  17. Nikhil wrote on April 24th, 2012 at 00:52:

    Can I open a website in fullscreen mode by default? I tried calling the API in the dom ready, but it didn’t do anything. But the same function works perfectly if registered as an event listener on an element. Does the api work only with events?

    1. Robert Nyman wrote on April 24th, 2012 at 15:05:

      No, it has to be initiated by a user action (like a click), for security reasons.

      1. Nikhil wrote on April 24th, 2012 at 22:16:

        Ahh.. thought so..thanks!

  18. Sazzad wrote on April 27th, 2012 at 06:51:

    Its not working while I’m using that in jQuery(document).ready(function($) {});

    jQuery(document).ready(function($) {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
    alert(“requestFullscreen”);
    docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
    alert(“mozRequestFullScreen”);
    docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
    alert(“webkitRequestFullScreen”);
    docElm.webkitRequestFullScreen();
    }
    });

    Can anyone please help me?

    1. Robert Nyman wrote on April 29th, 2012 at 08:38:

      Not sure why you use two document.ready functions, unless it’s a typo in the comment. It could also depend on your doctype if documentElement is available in the page or not.

      Start by using the code in the Fullscreen API demo and take it from there.

      1. Sazzad wrote on April 29th, 2012 at 22:50:

        May be it wont work on document onload.
        May be it works only on user interaction.
        May be it only works on click.

        1. Robert Nyman wrote on May 8th, 2012 at 05:50:

          Ah, right. Yes, it has to be initiated by a user interaction.

  19. sree wrote on May 21st, 2012 at 04:13:

    after displaying fullscreen first it displaying press ESC ………………..
    from where this text displaying

    and

    how can i avoid displaying this text

    1. Jean-Yves Perrier wrote on May 21st, 2012 at 23:59:

      You want to get rid of the message telling the user that he can live the fullscreen mode by pressing ESC?

      This is not possible, for security reasons: the user has to be notified he’s now in fullscreen mode.

  20. Dion wrote on May 23rd, 2012 at 06:07:

    hi,

    Is it possible to let it be fullscreen all the time.

    cause in mozilla it doesn’t stay fullscreen when i click on a differt link then it is getting small again and i have to click on fullscreen again.

    but in chrome it stays fullscreen.

    please help

    (sorry for english i’m taking lessons)

    1. Robert Nyman wrote on May 23rd, 2012 at 07:09:

      It depends on what you mean, but if you click on a link and go to another page/web site, I believe the correct behavior is to leave fullscreen.

  21. Chris Pearce wrote on May 23rd, 2012 at 14:24:

    @Dion: You can get the behaviour you want by using “browser” fullscreen mode, as opposed to the fullscreen API. Press the F11 key on Windows or Linux, or CMD+Shift+F on a Mac.

  22. Kos Korolev wrote on May 29th, 2012 at 04:47:

    Is document.mozCancelFullScreen() should be initiated by user as well as el.mozRequestFullScreen()?
    I want to exit fullscreen mode when video is ended. I tried to call document.mozCancelFullScreen() in the ‘ended’ event listener of video element, but it doesn’t work from here. It works in Google Chrome and Safari, but doesn’t work in Firefox 13 and Firefox Aurora (14a2).
    If document.mozCancelFullScreen() only should be initiated by user is there any workaround to exit fullscreen mode when video is ended?

    Thank you for your help!

    1. Robert Nyman wrote on May 29th, 2012 at 05:08:

      To my knowledge, the cancelling has to be user initiated as well. I’ve tested and confirmed your findings, and I also tried the alternative of triggering a click through JavaScript on a button that closes fullscreen, but no difference.

      So, from what I can see right now, there is no other way.

  23. Ryan wrote on June 22nd, 2012 at 19:26:

    Hi Robert,
    my page uses to reload the page on browser size change. I do this to resize a large image to best fit into the size of the window.

    I implemented the fullscreen code and half of it works. I am able to get to the fullscreen state. But at that point the page refreshes (as expected). Everything looks great. However, the refresh looks like it might be causing the fullscreen state to be lost. The browser no longer thinks its in full screen mode anymore after the refresh so the Cancel button doesn’t work.

    Any ideas? Thanks!

    1. Robert Nyman wrote on June 25th, 2012 at 06:35:

      Personally, I’d rather detect the available screen width and height to adapt the image’s size to that – reloading the entire page doesn’t seem optimal for performance or server load.

      Also, I believe, like you say, that the fullscreen state might indeed be lost in that case.

  24. jinzhouwang wrote on July 22nd, 2012 at 07:49:

    now, the scroll bar is always hide when in the full screen mode in firefox. I can’t handle it. Could u give me the help/

    1. Robert Nyman wrote on July 31st, 2012 at 12:52:

      Great question! I’m looking into it right now.

    2. Robert Nyman wrote on August 3rd, 2012 at 01:29:

      It is a scrolling bug and will be fixed.

  25. gustavo wrote on July 31st, 2012 at 13:51:

    Good Morning: how could deploy to the web when put up fullscreen without any event of any object

    I guess I should be in tag .. but the examples are on some event “click” of de Button or on the video case. I hope you can help me greetings

    this is function with button element
    (function () {
    var viewFullScreen = document.getElementById(“view-fullscreen”);
    if (viewFullScreen) {
    viewFullScreen.addEventListener(“click”, function () {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
    }
    }, false);
    }
    })();

  26. gustavo wrote on July 31st, 2012 at 13:53:

    this tag body onload=””.. but not idea. thank you

    1. Robert Nyman wrote on July 31st, 2012 at 14:00:

      As mentioned in the comments above, it has to be initiated by a user action. That means you can’t just trigger it at load or similar.

  27. JuniorDeveloper wrote on September 26th, 2012 at 04:07:

    There is a minor bug in ipad browser, wherein a if laid over a video still makes the video enter full screen mode on zoom gesture. I could fix it up if I knew a way to disable the full screen mode of video. But at the same time I should be able to zoom in text if present in the screen.

  28. JuniorDeveloper wrote on September 26th, 2012 at 04:08:

    *ipad browser, wherein a div if laid…

    1. JuniorDeveloper wrote on September 26th, 2012 at 05:03:

      Got it fixed. One option to disable the zoom in of videos is to remove the ‘control’ attribute of video tag, the “zoom in” is automatically disabled.

      Let me know if there is some way in the webkit to display the controls as well as disable the zoom in.

      1. Robert Nyman wrote on September 26th, 2012 at 05:35:

        Glad you found a solution. Not sure about how to disable the zoom in.

  29. Balsey Dean De Witt, Jr. wrote on September 29th, 2012 at 19:52:

    If you do not want a scroll bar on your webpage, this works with firefox

    I have been really disappointed that I have not figured out how to keep a webpage into full screen mode. There were scripts for a button to open up a page, but that required a first page with a button and when you clicked the button, it would open up firefox in full screen. Problem is that when ever another window would open up, well, no more full screen!

    Why is it after all these years that this hasn’t been addressed and fixed? I sort of remember that there was some kind of security problem with this. This is all BS or we all have people programming that are stumped!

    Visit my site http://www.webzmagic.com ThankZ

    Dean

    1. Robert Nyman wrote on October 1st, 2012 at 03:36:

      Scrolling fullscreen is coming. When it comes to other window being opened and not keeping the fullscreen state, is about security.

      This is to avoid phishing (hidden URL etc) when such actions happen.

  30. Balduin wrote on October 10th, 2012 at 15:06:

    How can I get the screen hight and width in the fullscreen mode?

    1. Robert Nyman wrote on October 11th, 2012 at 03:50:

      By checking screen.width and screen.height

  31. Steven wrote on November 8th, 2012 at 17:50:

    Hi Robert,

    I’m currently running with firefox ver16.0.2 and I’m try to exit from full screen mode with mozCancelFullScreen(). I am not sure why it doesn’t run. There isn’t any error too. But mozRequestFullScreen() works fine.

    Please help~ Thanks!

    1. Robert Nyman wrote on November 9th, 2012 at 14:51:

      Interesting. I don’t know off the top off my head why that would be. If the problem persists please file a bug. Thanks!

  32. Chris Pearce wrote on November 9th, 2012 at 23:08:

    @Steven: Be aware that you can only call document.mozCancelFullScreen() if you’re inside a document which is fullscreen. i.e. if you’re in an which is a contained inside another document which is fullscreen, mozCancelFullScreen() won’t do anything in the inner iframe, as only the outer document is acutally fullscreen. i.e. calling mozCancelFullScreen in the outer document will cancel fullscreen, but calling it in the inner document won’t.

    Also be aware that mozCancelFullScreen() reverts fullscreen to have the previous fullscreen element as fullscreen. So if you’ve requested fullscreen multiple times, cancelling fullscreen won’t necessarily exit fullscreen fully, it may rollback to the previous fullscreen state.

    1. Steven wrote on November 11th, 2012 at 18:35:

      Thanks Chris for the explanation. I’ve got it. But once i call the mozCancelFullScreen(), I won’t be able to call mozRequestFullScreen() again. So how can I exit fullscreen fully?

  33. Gaurav M wrote on November 27th, 2012 at 01:31:

    Awesome.. was looking for it. Going in full screen mode and launching another video in full screen is super cool! feature

  34. Riccardo wrote on December 4th, 2012 at 03:18:

    Hi, I’m new to javascript, but this function is what I need! just yesterday i found this pages, to understand how to change the code for my intentions:

    https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
    http://help.dottoro.com/larrqqck.php
    http://help.dottoro.com/ljawbmqm.php

    I wish to open my site in fullscreen on access thereto with the notification of the passage in fullscreen mode … I tried to change the code like this:

    for HTML:

    Into the base.js file:

    (function () {
    var viewFullScreen = document.getElementById(“view-fullscreen”);
    if (viewFullScreen) {
    viewFullScreen.addEventListener(“load”, function () {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
    }
    }, false);
    }

    expecting to see the page opened with the notification of the passage in fullscreen mode, but nothing … may you give me a hand? Many thanks

    Riccardo

  35. Riccardo wrote on December 4th, 2012 at 03:24:

    sorry, the comment did not take the html code … I wanted to say that I have inserted id=”view-fullscreen” in the html tag at the beginning of the page which I want to open in fullscreen mode

    1. Robert Nyman wrote on December 5th, 2012 at 02:51:

      You can’t have it open into fullscreen automatically, it has to be triggered through an action by the user, like clicking a button.

  36. Riccardo wrote on December 5th, 2012 at 02:59:

    Thanks for the reply and for the clarification!

    Greetings,

    Riccardo

  37. ganesh wrote on December 30th, 2012 at 06:20:

    Hi, in my case fullscreen is working perfactly but exit fullscreen is not working.

    this is my code for fullscreen –
    function goFullscreen(id) {

    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
    }
    }

    This is my code for exit fullscreen
    function noFullscreen(id) {

    var element = document.getElementById(id);
    if (element.exitFullScreen) {
    element.exitFullScreen();
    } else if (element.webkitCancelFullScreen) {
    element.webkitCancelFullScreen();
    }
    }

    here element id is given to , and I am calling this function from flash(swf).. can you show me where is the mistake.
    Thanks in adv.

    1. Robert Nyman wrote on December 30th, 2012 at 13:15:

      First, you are supposed to call it on the document element, not a specific element in the DOM. Second, you need to include code for Firefox as well, not just WebKit:

      if (document.exitFullscreen) {
      document.exitFullscreen();
      }
      else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
      }
      else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
      }

      1. ganesh wrote on December 31st, 2012 at 01:46:

        Thanks Robert it worked, actually you have already mentioned the same thing at the beginning but I couldn’t understand it before. but now Its working perfectly..
        Well, there is something that I think I should inform you. in my html file, I have two function one for fullscreen and one for normal screen. If I call fullscreen func. and then call normalscreen func. it works, but if I fullscreen the browser manually by pressing F11 and then call normalscreen func. than it does not work, it seems that normalscreen func. can not detect/understand that the browser is already in fulscreen mode or not. It is not any issue for me, just wanted to inform you.

        1. Robert Nyman wrote on January 1st, 2013 at 22:58:

          Glad that it worked!
          And yes, the built-in fullscreen feature and the one called programmatically through this API aren’t the same and can’t interact, unfortunately.

  38. Evyatar wrote on January 17th, 2013 at 12:20:

    great post, thanks!

    I have one question though- let’s say I’m building a game in which the Esc key opens up a menu. In fullscreen mode the “keydown” even isn’t even fired.

    This causes users to open the menu with Esc mode, click to toggle fullscreen, but then when they want to close the menu- it’s not possible, since the Esc is caught for the fullscreen and doesn’t even get passed down to the code.

    Is there anything I can do about this, other than change the menu open key?

    1. Robert Nyman wrote on January 18th, 2013 at 07:44:

      Thanks!
      I believe – until requestFullscreenWithKeys is supported – that changing they key for menu is probably the most consistent solution at the moment, unfortunately.

      1. Evyatar wrote on January 18th, 2013 at 12:47:

        Guessed as much, and that’s what I ended up doing :)

        Oh well, I’ll wait for that to be supported then. I think that the Esc is an important key in user interaction to opening a menu, kind of a standard. Then again it’s on the web, so there users aren’t accustomed to do it.

        I’ll cross my fingers and hope for requestFullscreenWithKeys to land!

        1. Robert Nyman wrote on January 19th, 2013 at 11:53:

          Sounds good! Hope it all goes well, and yes, fingers crossed! :-)

  39. Blue Moon wrote on April 2nd, 2013 at 12:08:

    Once you are in full screen mode let’s say you use a META REDIRECT to another page. Will the state remain in full screen on the second page? Probably not, I’m guessing…

    If so, this would really be useful for something like digital signage.

    1. Robert Nyman [Editor] wrote on April 3rd, 2013 at 08:12:

      For security reasons, I assume you will be taken out of fullscreen mode with that approach.

Comments are closed for this article.