Force Browser to go to Full Screen via JavaScript

Is there a way to use JavaScript on scene load to force a browser into Full Screen mode?

this’ll need a userinteraction as a fullscreenrequest is always prompted for permission …

Thanks! How would I set that in JavaScript on mouse click?

i’d use this small library:

Here’s how to create a toggle:

	var elem = document.getElementById(hypeDocument.documentId());
	if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
		if (elem.requestFullscreen) {
		} else if (elem.msRequestFullscreen) {
		} else if (elem.mozRequestFullScreen) {
		} else if (elem.webkitRequestFullscreen) {
	} else {
		if (document.exitFullscreen) {
		} else if (document.msExitFullscreen) {
		} else if (document.mozCancelFullScreen) {
		} else if (document.webkitExitFullscreen) {

Demo: (21.5 KB)

Information for this was found at:



This works great for Safari and Opera, but in Firefox it puts it in the upper left-hand corner in fullscreen.
Does that make sense? Any idea how to get Firefox to center it fullscreen?

I can confirm this is the case. I think it is defiantly something between Hype and FF that is the problem as this

Site that demos the APIs works ok.

Any ideas on a fix? Do you think it will work if I export to HTML5 folder instead of preview mode from Hype?

Can you share what you have so far?

These are all running a similar function: / but it might be doing something extra…

Sorry , Yes I saw that it uses the same API. in particular mozRequestFullScreen for FF
I meant the demo works directly from the …github page. So FF does work correctly at fullscreen on sites.

So I suspect the there could be a size thing from the Hype Containers that FF cannot deal with when in fullscreen ??

May be related to this problem…

I just tested the base.js code ( placed in a Hype function) and it works as expected on Hype scenes. So need to look at it and see what it is doing differrent .

So I got it down to this.

var docElm = document.documentElement;

The fullscreen is being called on the documentElement rather than the HypeDocument.

I think there was some code that dealt with elements on the documentElement but I will have to look at that later.

Swapping the

var elem = document.getElementById(hypeDocument.documentId());


var elem = document.documentElement;

will work for now though


I will test this evening, but you got it to work by:

var elem = document.getElementById(hypeDocument.documentId());
var elem = document.documentElement;


Thanks so very much!!!

1 Like

Not working in iphone browser

There isn’t really a notion of full screen on an iPhone browser, so this doesn’t really apply to that device. You might be interested in this method of adding a Hype webpage to your home screen: Offline Web Apps for iOS with Tumult Hype using the Cache Manifest (aka Progressive Web Apps)