What the iPhone Duo means for web development (and Video.js)

This is an engineer’s hands‑on exploration of the new folding iPhone and the web APIs Apple exposed for it, focused on how those APIs enable folded‑screen layouts and what limits remain for web developers. Two APIs are highlighted: the Device Posture API (navigator.devicePosture and @media (device-posture: folded)) to detect whether a display is continuous or folded, and the Viewport Segments API (window.viewport.segments plus CSS @media queries and env(viewport-segment-*) variables) to read the size, position and count of screen segments. Concrete examples show how to snap a two‑column layout to fold segments using env(viewport-segment-width) and compute a hinge gap with env(viewport-segment-left/right), giving practical rules for responsive designs on folded hardware.

Using those capabilities, a prototype video player UI was built with Video.js to mimic Netflix’s Duo layout: video occupying the top segment and large controls on the bottom. Because iOS normally forces native fullscreen controls, three WebKit feature flags (including Fullscreen API) had to be enabled to allow custom controls; with them, a new skin and duo‑controls CSS position the video and control panel using device‑posture and segment env vars. A reflected, blurred background was implemented by copying frames to a small canvas via requestVideoFrameCallback and styling it with transform/blur/mask. Testing on Chromium/Pixel Fold revealed Chromium clips fullscreen to the top segment, so platform restrictions still prevent a fully consistent cross‑device experience, but Video.js v10’s composable architecture made rapid prototyping straightforward.