HTML game in Fullscreen

Hi Team,
I am trying to get one of our HTML games to work fullscreen without any controls however there doesn't seem to appear any solution. I tried to resize the iFrame which makes the frame larger but the game window stays the same size?
Are there any solutions? Thanks.

Answers

  • smurftedsmurfted Member, PRO Posts: 570

    i wondering the same thing..

  • adent42adent42 Key Master, Head Chef, Executive Chef, Member, PRO Posts: 3,034

    So if you are using an iframe, you need to add an "allowfullscreen" attribute to the iframe.

    For arcade we, use a combination of the following:

    This library (screenfull)

    https://github.com/sindresorhus/screenfull/blob/v5.2.0/dist/screenfull.min.js

    And this code:

    if (screenfull.isEnabled) {
      screenfull.toggle(document.body);
    }
    


    The current error in arcade that should be fixed tonight is that we forgot to add the "allowfullscreen" attribute to our iframe as part of the refresh.

  • adent42adent42 Key Master, Head Chef, Executive Chef, Member, PRO Posts: 3,034

    Note that the fullscreen API doesn't work in Safari iOS, so this will only work on desktop browsers and maybe android.

    That library I used was to be safe for more browser, but if you want to do the same thing without a library and are safe assuming modern browser, you can do the following:

    function goFullScreen() {
      if (document.fullscreenEnabled) {
        var gamePlayArea = document.getElementById("gse-player")
        gamePlayArea.requestFullScreen()
      }
    }
    

    This needs to be in the sample-index.html and you'll need to add your own button or keyboard shortcut handlers to go fullscreen.

    Hope that helps!

Sign In or Register to comment.