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:

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);

Styling fullscreen

In CSS, we get a number of pseudo-classes for styling fullscreen elements. The most reliable one is for full-screen and automatically gets triggered when the document/element is in fullscreen mode:

html:-webkit-full-screen {
background: red;

html:-ms-fullscreen {
background: red;
width: 100%; /* needed to center contents in IE */

html:fullscreen {
background: red;

Notice here that the W3C approach doesn’t use a hyphen between the word ‘full’ and the word ‘screen’.

It should also be added that Firefox is the only web browser that applies a width and height of 100% to the element that is requesting fullscreen, since we believe that is the desired behavior. This can of course be overridden with the above CSS.

Full screen with key input

For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag:


This does not work in Safari, and the method won’t be called.

With Firefox, we are discussing and looking into various ways of how we we could add keyboard input support without jeopardizing the end user’s security. One suggestion, that no one has implemented yet, is the requestFullscreenWithKeys method, which in turn would trigger certain notifications for the user.

Web browser support

This feature is currently available in Firefox beta, but it’s due to land in the official release of Firefox, version 10, tomorrow! It has also been available in Google Chrome since version 15, Safari since 5.1 and Internet Explorer since version 11.

Play with fullscreen!

I have a Fullscreen API demo available for you to play with, and all the code is available in the Fullscreen repository on GitHub.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Rodrigo Ayala

    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 :)

    January 30th, 2012 at 10:57

    1. Robert Nyman

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

      January 30th, 2012 at 10:59

  2. James

    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 ( “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.


    January 30th, 2012 at 11:23

    1. Robert Nyman


      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.

      January 31st, 2012 at 02:41

  3. marcusklaas

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

    January 30th, 2012 at 11:39

    1. marcusklaas

      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..

      January 30th, 2012 at 13:44

    2. Robert Nyman

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

      January 31st, 2012 at 02:42

  4. André Luís

    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.

    January 30th, 2012 at 15:00

    1. Robert Nyman

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

      January 31st, 2012 at 02:42

  5. Chris Pearce

    @James: View > Fullscreen mode and HTML fullscreen mode treat key input differently in order to guard against phishing attacks; if 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.

    January 30th, 2012 at 18:17

  6. Oliver Caldwell

    Wrote a little wrapper class for the API. Did not want to go writing those if statements every time.

    January 31st, 2012 at 08:19

    1. Robert Nyman

      Nice, thank you!

      January 31st, 2012 at 09:53

  7. John Dyer

    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?

    January 31st, 2012 at 15:15

    1. Robert Nyman

      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.

      February 1st, 2012 at 06:28

  8. Joe Shelby

    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.

    February 2nd, 2012 at 20:22

    1. Robert Nyman

      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.

      February 3rd, 2012 at 01:20

  9. kris

    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.

    February 9th, 2012 at 04:53

    1. John Dyer

      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.

      February 9th, 2012 at 06:58

    2. Robert Nyman

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

      February 9th, 2012 at 12:16

  10. 40kg

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

    February 19th, 2012 at 23:16

    1. Robert Nyman

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

      February 20th, 2012 at 01:43

  11. 40kg

    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

    February 20th, 2012 at 18:16

    1. Robert Nyman

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

      February 21st, 2012 at 00:20

    2. Toby

      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:

      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!

      March 8th, 2012 at 10:09

      1. Chris Pearce

        @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.

        March 8th, 2012 at 14:52

        1. Robert Nyman

          Great to hear!

          March 9th, 2012 at 00:51

        2. Toby

          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!

          March 12th, 2012 at 07:10

          1. Robert Nyman

            Thank you, very glad to hear you liked it!

            March 12th, 2012 at 13:40

  12. cpearce

    @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?

    February 21st, 2012 at 13:58

    1. Robert Nyman

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

      February 22nd, 2012 at 01:10

    2. 40kg

      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( ⊙ _ ⊙ ).

      February 22nd, 2012 at 02:24

      1. Robert Nyman

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

        February 22nd, 2012 at 02:26

  13. Front Row Tickets

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

    February 28th, 2012 at 08:41

    1. Robert Nyman

      Good to hear!

      February 28th, 2012 at 08:55

  14. Gustav Evertsson

    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().

    March 5th, 2012 at 23:47

    1. Robert Nyman

      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.

      March 6th, 2012 at 01:01

      1. Gustav Evertsson

        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?

        March 6th, 2012 at 05:51

        1. Robert Nyman

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

          March 6th, 2012 at 05:53

  15. Neel Mehta

    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?

    March 11th, 2012 at 17:52

    1. Chris Pearce

      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?

      March 11th, 2012 at 18:02

    2. Robert Nyman

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

      March 12th, 2012 at 13:40

  16. Sindre Sorhus

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

    April 22nd, 2012 at 07:16

    1. Robert Nyman


      April 24th, 2012 at 15:03

  17. Nikhil

    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?

    April 24th, 2012 at 00:52

    1. Robert Nyman

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

      April 24th, 2012 at 15:05

      1. Nikhil

        Ahh.. thought so..thanks!

        April 24th, 2012 at 22:16

  18. Sazzad

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

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

    Can anyone please help me?

    April 27th, 2012 at 06:51

    1. Robert Nyman

      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.

      April 29th, 2012 at 08:38

      1. Sazzad

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

        April 29th, 2012 at 22:50

        1. Robert Nyman

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

          May 8th, 2012 at 05:50

  19. sree

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


    how can i avoid displaying this text

    May 21st, 2012 at 04:13

    1. Jean-Yves Perrier

      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.

      May 21st, 2012 at 23:59

  20. Dion


    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)

    May 23rd, 2012 at 06:07

    1. Robert Nyman

      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.

      May 23rd, 2012 at 07:09

  21. Chris Pearce

    @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.

    May 23rd, 2012 at 14:24

  22. Kos Korolev

    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!

    May 29th, 2012 at 04:47

    1. Robert Nyman

      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.

      May 29th, 2012 at 05:08

  23. Ryan

    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!

    June 22nd, 2012 at 19:26

    1. Robert Nyman

      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.

      June 25th, 2012 at 06:35

  24. jinzhouwang

    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/

    July 22nd, 2012 at 07:49

    1. Robert Nyman

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

      July 31st, 2012 at 12:52

    2. Robert Nyman

      It is a scrolling bug and will be fixed.

      August 3rd, 2012 at 01:29

  25. gustavo

    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) {
    else if (docElm.mozRequestFullScreen) {
    else if (docElm.webkitRequestFullScreen) {
    }, false);

    July 31st, 2012 at 13:51

  26. gustavo

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

    July 31st, 2012 at 13:53

    1. Robert Nyman

      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.

      July 31st, 2012 at 14:00

  27. JuniorDeveloper

    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.

    September 26th, 2012 at 04:07

  28. JuniorDeveloper

    *ipad browser, wherein a div if laid…

    September 26th, 2012 at 04:08

    1. JuniorDeveloper

      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.

      September 26th, 2012 at 05:03

      1. Robert Nyman

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

        September 26th, 2012 at 05:35

  29. Balsey Dean De Witt, Jr.

    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 ThankZ


    September 29th, 2012 at 19:52

    1. Robert Nyman

      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.

      October 1st, 2012 at 03:36

  30. Balduin

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

    October 10th, 2012 at 15:06

    1. Robert Nyman

      By checking screen.width and screen.height

      October 11th, 2012 at 03:50

  31. Steven

    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!

    November 8th, 2012 at 17:50

    1. Robert Nyman

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

      November 9th, 2012 at 14:51

  32. Chris Pearce

    @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.

    November 9th, 2012 at 23:08

    1. Steven

      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?

      November 11th, 2012 at 18:35

  33. Gaurav M

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

    November 27th, 2012 at 01:31

  34. Riccardo

    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:

    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) {
    else if (docElm.mozRequestFullScreen) {
    else if (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


    December 4th, 2012 at 03:18

  35. Riccardo

    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

    December 4th, 2012 at 03:24

    1. Robert Nyman

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

      December 5th, 2012 at 02:51

  36. Riccardo

    Thanks for the reply and for the clarification!



    December 5th, 2012 at 02:59

  37. ganesh

    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) {
    } else if (element.webkitRequestFullScreen) {

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

    var element = document.getElementById(id);
    if (element.exitFullScreen) {
    } else if (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.

    December 30th, 2012 at 06:20

    1. Robert Nyman

      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) {
      else if (document.mozCancelFullScreen) {
      else if (document.webkitCancelFullScreen) {

      December 30th, 2012 at 13:15

      1. ganesh

        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.

        December 31st, 2012 at 01:46

        1. Robert Nyman

          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.

          January 1st, 2013 at 22:58

  38. Evyatar

    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?

    January 17th, 2013 at 12:20

    1. Robert Nyman

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

      January 18th, 2013 at 07:44

      1. Evyatar

        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!

        January 18th, 2013 at 12:47

        1. Robert Nyman

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

          January 19th, 2013 at 11:53

  39. Blue Moon

    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.

    April 2nd, 2013 at 12:08

    1. Robert Nyman [Editor]

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

      April 3rd, 2013 at 08:12

Comments are closed for this article.