Fullscreen API: Which events are fired?

Question

I need to know which (DOM) events are fired when a user enter the fullscreen mode via the new Fullscreen API. I tried for example this snippet but it doesn't fire:

jQuery('body').on('fullScreenChange', function() { alert("Fired!"); });

Which browser, which version, which OS? See https://developer.mozilla.org/en/DOM/Using_full-screen_mode#AutoCompatibilityTable Do you use the latest jQuery? — powtac, Mar 08 '12 at 16:54
Note that despite the answers here, the event doesn't fire when hitting F11, as pointed out in [this answer](https://stackoverflow.com/a/21118401/345716) — Peter V. Mørch, Feb 13 '19 at 16:41

score 66 · Answer 1 · edited Feb 07 '15 at 16:46

66

I was using:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', fn);

It fires for Safari, Chrome, and Firefox (haven't tested others). There seems to be a subtle difference in the resulting context between webkit and moz, element height and width are different. But the events fire, which is your question.

Oh. And watch out for using alert('fs') with full screen testing. It often interferes with the screen change.

edited Feb 07 '15 at 16:46

fregante

29,050
14
119
159

answered Mar 19 '12 at 18:03

Bobbi Bennett

1,636
1
11
13

re 'on' vs 'bind'. I kept both, but in the edit lost the nick of the original correcting editor. Sorry. – Bobbi Bennett Mar 28 '13 at 14:33
2

webkitfullscreenchange doesn't fire for me in Safari when using Vimeo in an iframe. It works in chrome. – Drew Baker Jun 10 '14 at 18:48
It has been so, long, I forget what events I had in the list and which not. It seems Kingpin2k has edited the event list in this answer, I hope for the better! – Bobbi Bennett Sep 01 '14 at 21:19
On older versions of Safari iOS, I had to use: `$('video').on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange webkitbeginfullscreen webkitendfullscreen", foo)` – Rune Kaagaard Apr 24 '19 at 08:39

score 19 · Accepted Answer · edited Jun 15 '17 at 12:23

19

Your link shows the answer...

When full-screen mode is successfully engaged, the document which contains the full-screen element receives a fullscreenchange event. When full-screen mode is exited, the document again receives a fullscreenchange event. Note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting full-screen mode, but if the document has a non null fullScreenElement , you know you're in full-screen mode.

edited Jun 15 '17 at 12:23

serv-inc

35,772
9
166
188

answered Mar 08 '12 at 16:54

1

FWIW, this only works when entering/exiting full screen with the Fullscreen API. If you enter full screen from your browser's toolbar, for example, the event won't fire. – samlandfried Jun 26 '19 at 20:59

score 3 · Answer 3 · answered Mar 08 '12 at 17:02

There is no fullscreenChange event in native jQuery. But there are several third-party plugins which provide you access to the event:

As you can see on their code there is no clean API access to this type of event.

Fullscreen API: Which events are fired?

3 Answers3

Linked