nearpoint nearpoint - 1 year ago 150
jQuery Question

How can I detect when an iFrame goes fullscreen?

I have a document that is embedded in my site by using an iFrame. The iFrame is from document viewer. The iFrame has its own built in fullscreen button. The fullscreen button is within the iFrame so I cannot attach a click event listener to the button. I added the attribute allowfullscreen to the iFrame to allow it to go fullscreen.

I want to do something like this:

$('iframe').on 'EnterFullScreen', () ->
# Run function

But what event do I have to listen to, to detect when the iFrame is going fullscreen?

Here is a jsfiddle with the type of document I am embedding. The goal is to detect when the document goes fullscreen.

Answer Source

You can listen for a fullscreen change in your parent page (the one having the iframe):

function changeHandler(e) {
   // Mode has changed.

document.addEventListener("fullscreenchange", changeHandler, false);
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);