A Video.js developer explored the implementation of custom web-based video player layouts for the iPhone Duo using the Device Posture and Viewport Segments APIs. The experiment demonstrates how developers can leverage these APIs to create dual-screen UI experiences, while noting current limitations in browser fullscreen behavior on folding devices.
The arrival of the iPhone Duo forces web developers to move beyond responsive design into posture-aware engineering. While the experiment proves that CSS environment variables can successfully snap video to one screen and controls to another, the lack of Fullscreen API support in mobile Safari remains a significant barrier for premium OTT providers. If Apple maintains native control requirements, web-based players will struggle to match the immersive, branded experiences found in native apps like Netflix. The industry must now watch for WebKit and Chromium updates that might allow the fullscreen container to span both segments without clipping the video element itself.
Apple's WebKit team has not adopted either the Viewport Segments API or the Device Posture API, leaving Video.js and other web players without programmatic access to the iPhone Duo's hinge position. Intel filed WebKit standards positions for both APIs in March 2024, and as of late 2026 neither issue has received a response. The Viewport Segments issue's only comment is the proposer asking for an update in April 2025, which remains unanswered. This means Video.js developers must treat fold detection as a progressive enhancement rather than a reliable capability on Apple hardware.
Jen Simmons, Apple's developer relations lead for web technologies, confirmed that Safari 27.1 supports both Device Posture and Viewport Segments behind a feature flag, accessible through Xcode 27.1 beta's iPhone Duo simulator. This signals that Apple is at least evaluating the standards internally, though no timeline for default enablement has been announced. The gap between flag-gated support and production readiness is precisely the window the Video.js experiment targets, since OTT providers shipping branded players need APIs that work without user intervention.
For web teams building video experiences on the iPhone Duo, the practical guidance is to use container queries, swap 100vh for 100dvh, and keep critical controls out of the centre band where the fold runs. The open display measures approximately 890 by 626 CSS pixels with an aspect ratio around 1.4, compared to 2.2 on a standard iPhone, which means Video.js player chrome must adapt to a nearly square viewport. Apple's Xcode 27.1 simulator includes controls to open, close, and rotate the device, giving developers their first opportunity to test Safari's real viewport behavior on foldable hardware before the device ships on October 23.
A new Video.js experiment reveals that while Device Posture and Viewport Segments APIs enable dual-screen layouts, browser limitations persist on the iPhone Duo. Because Safari restricts custom fullscreen controls, web developers face significant barriers in creating immersive, branded video experiences that match the quality of native mobile applications.
The Device Posture API allows web players to detect continuous versus folded states, while the Viewport Segments API provides DOMRect coordinates for the two display regions and the hinge gap.
Safari currently requires native controls for fullscreen video on the iPhone Duo, which blocks custom web-based UI overlays and prevents developers from creating branded, immersive experiences.
Yes, Jen Simmons confirmed that Safari 27.1 supports both APIs behind a feature flag, accessible through the Xcode 27.1 beta's iPhone Duo simulator.
Developers should use container queries, swap 100vh for 100dvh, and ensure critical controls are kept out of the center band where the fold runs.
Add StreamingMeme as a preferred source on Google to see more of our streaming news at the top of your Search results.
Add as preferred source
