Force Browser to go to Full Screen via JavaScript

(Jud) #1

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

(Hans-Gerd Claßen) #2

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

(Jud) #3

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

(Hans-Gerd Claßen) #4

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

Information for this was found at:

Knowledge base: Guides from the Tumult Team
(Jud) #6


(Jud) #7

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?

(Mark Hunte) #8

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.

(Jud) #9

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…

(Mark Hunte) #11

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 .

(Mark Hunte) #12

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

(Jud) #13

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

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

(Mark Hunte) #14


(Jud) #15

Thanks so very much!!!