PiP on iOS doesn't work when safari site is added to home screen

I have a website that streams a video, and it's not particularly exotic (technically speaking), but I lose PiP functionality when adding the site to iOS Home Screen from Safari. By iOS I mean latest iOS running on iPhone and iPad (both devices repro the issue per the details and problem description below).


Details


I can open my website on macOS/iOS Safari and see the video stream, and I can access PiP (either from an html video control, or by going to fullscreen first and then tapping the video control for PiP). I can even access it using a custom control defined in HTML. My server permits CORS and everything works smoothly, no errors.


Baseline testing indicates all is well.


Problem


On iOS (iPhone, and iPad), in Safari, I tap the up-menu button while on my site and tap "Add to Home Screen". Now a web app for my site exists on the Home Screen.


I open the web app, and my video stream works and looks nice - but the PiP button no longer appears - neither as an overlay on video, nor when I access full screen (full screen mode works fine).


When I make the PiP button appear anyway (define my own HTML element for PiP), and invoke JS code to request PiP: "videoElement.requestPictureInPicture()" an exception is thrown with the error message in the exception stating:


The video element does not support the Picture-in-Picture mode.


The error's explicit semantics contradict observations when using Safari browser directly, wherein the video element is observed working and supporting PiP.


Since nothing changed in the code of the site, and the platform remained the same, and the explicit error raised by the video is well.. explicit, it seems that engineering has applied a deliberate handicap to web apps (to put gently).


How do I overcome this handicap?

How do I get PiP working when my site is used as a web app?

How do I justify this behavior to my users? Pointing fingers at Apple without even asking would be tasteless.


Is there a device-specific setting I can change to achieve parity for this behavior in iOS web app?

iPhone XS

Posted on Aug 6, 2024 6:45 PM

Reply

Similar questions

1 reply

Aug 6, 2024 11:27 PM in response to supertimo

The Picture-in-Picture (PiP) mode issue on iOS Home Screen is due to restrictions on certain features and APIs in standalone mode compared to Safari. This makes the web app experience more controlled and limited. Possible workarounds include checking HTML5 and CSS3 support, implementing feature detection, user education, and providing a fallback option. However, there are no direct device-specific settings to enable PiP for web apps. Clear communication and alternative solutions can help mitigate the impact and potentially lead to future improvements.

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

PiP on iOS doesn't work when safari site is added to home screen

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.