Bug 149386 – When I check document.webkitFullscreenElement it always returns undefined if I have a video object in fullscreen. It should return the video element.

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

[Raul Jimenez]

Steps to Reproduce:
1. Open http://codepen.io/flower/pen/RPWXOw
2. Click fullscreen button.
3. Click play.

Expected Results:
It should shows an alert with a message "isFullscreen: true".

Check our API for fullscreen for code details:
https://github.com/2fdevs/videogular/blob/master/app/scripts/com/2fdevs/videogular/services/vg-fullscreen-api.js

Actual Results:
It shows an alert with a message "isFullscreen: false".

Also not working in at least iOS 8.3 [12F69].

Configuration: iPad Mini 16GB WiFi

[Jer Noble]

The Fullscreen API (and thus document.webkitFullscreenElement) is not supported on iOS.

[Raul Jimenez]

(In reply to comment #1)
> The Fullscreen API (and thus document.webkitFullscreenElement) is not
> supported on iOS.

Extracted from Apple documentation:

"The document.webkitFullscreenElement property contains the element that is in full-screen mode. Check if this property is defined to determine if the user is currently in full-screen mode. The document.fullscreenEnabled property detects whether the browser supports the full-screen API, not whether an element is currently full-screen."

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

[Raul Jimenez]

(In reply to comment #2)
> (In reply to comment #1)
> > The Fullscreen API (and thus document.webkitFullscreenElement) is not
> > supported on iOS.
> 
> Extracted from Apple documentation:
> 
> "The document.webkitFullscreenElement property contains the element that is
> in full-screen mode. Check if this property is defined to determine if the
> user is currently in full-screen mode. The document.fullscreenEnabled
> property detects whether the browser supports the full-screen API, not
> whether an element is currently full-screen."
> 
> https://developer.apple.com/library/safari/documentation/AudioVideo/
> Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/
> ControllingMediaWithJavaScript.html

Ok, that seems the Safari Desktop reference, not Safari iOS reference.

Then, it's not possible to detect if a video element is in fullscreen mode with JavaScript?

[Jer Noble]

On iOS, you can use video.webkitDisplayingFullscreen, which predates the HTML5 Fullscreen API.

[Raul Jimenez]

(In reply to comment #4)
> On iOS, you can use video.webkitDisplayingFullscreen, which predates the
> HTML5 Fullscreen API.

It worked perfect, thanks :)