1

I've been looking all over and couldn't find any concise information

Using JavaScript and HTML, how can I determine when a video becomes fullscreen?

How can I determine when the video leaves fullscreen?

neaumusic
  • 10,027
  • 9
  • 55
  • 83

1 Answers1

2

April 21, 2015 -- solution I found:

var video = document.querySelector("#myVideo");

video.addEventListener("webkitfullscreenchange", function (e) {
    console.log('isFullscreen ', e.target.webkitDisplayingFullscreen);
});

If you inspect the event object, you will see bubbles: true, meaning that all ancestor (window, document) nodes should also see the event, and the listener can be attached to them as well

fullscreenchange Event:
https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

Similar question:
How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

Community
  • 1
  • 1
neaumusic
  • 10,027
  • 9
  • 55
  • 83
  • Can you link to the documentation where you found this? Also with `webkitfullscreenchange` I have a feeling that it won't work cross-browser. – ShadowCat7 Apr 21 '15 at 21:40
  • 1
    [fullscreenchange event MDN doc](https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange), you need to add the appropriate browser prefix to the event name, see also [this](http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/) – Patrick Evans Apr 21 '15 at 21:45
  • Thanks guys, at my work we only support webkit browsers but yes, you would need to prefix correctly – neaumusic Apr 21 '15 at 21:47
  • @PatrickEvans I would highly recommend Kapeli Dash and mdn.io/yourQueryHere for quick documentation lookups ;) – neaumusic Apr 21 '15 at 22:08