HTML game in Fullscreen

LearnIT

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.

smurfted

i wondering the same thing..

adent42

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.

adent42

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!

smurfted

is there any chance it will work on iPhones in the future or is it a system thing that you just can't get to?

As it's not just Safari i tried on iOS.

I also tried it on Chrome, Brave, DuckDuckGo & Edge... Which all also said it was unsupported unfortunately.

smurfted

on Android i have different results.

Firstly web embedded stuff didn't show up on either Chrome or Edge.

From the GS Arcade the screen seems off centre & when maximised is gets smaller?!

adent42

@smurfted this is an issue with iOS's browser, so nothing we can do unfortunately. I need to look into ways to fake fullscreen by popping up a window and making the game fill the browser window. At least now iOS will hide more of their UI so it looks more fullscreen like.