Webkitfullscreenchange Event Not Firing On Ipad

I'm working on some video controls for the iPad. When the user clicks a button, the video plays and immediately goes fullscreen. When the user clicks the 'Exit fullscreen' button

Solution 1:

reminds me of an article calling the iPad the new IE6. Don't expect the iOS browser to behave like desktop safari. as a workaround you could show the video inline (--> not with native fullscreen) and add your own controls. downside of this approach is that the browser navigation wastes some vertical-space. upside is you can fully control what's happening. following this idea you can imitate fullscreen by putting the video (and your custom controls) inside a container which then has to be positioned fixed and sized to 100% for width and height - i did that by adding a class as you don't have to worry about the previous size when switching back to normal. instead you simply remove the class again.

one other thing to keep in mind if you wanna do this: you cannot move a video-node via JS inside the container on iOS. Instead you either have to provide the full markup in html or clone the video-node, remove the original and insert the cloned one inside your container.

Solution 2:

you can try the .element:-webkit-full-screen css property

I was not able to register a fullscreen exit event for iframes on Safari