Document Picture-in-Picture: Pomodoro Timer Floating Window
Picture-in-picture was never about video. The Document Picture-in-Picture API opens an always-on-top window for any HTML — and a floating Pomodoro timer is the perfect first widget to build with it.
Picture-in-picture was never about video. That was just the first use case the platform shipped. The Document Picture-in-Picture API lets any web page open a small, always-on-top window and fill it with arbitrary HTML — buttons, timers, chat boxes, music controls, anything. No <video> element required. The perfect way to learn it is the canonical always-on-top widget: a floating Pomodoro timer that keeps ticking while you work in other tabs and apps. This guide builds that document picture in picture pomodoro timer floating window from scratch, with the styling gotchas and the 2026 browser-support reality included. What you'll build A working 25-minute Pomodoro timer (start, pause, reset) as a single HTML widget A "pop out" button that moves the timer into an always-on-top PiP window via requestWindow() Correct PiP styling: manually copied stylesheets plus @media (display-mode: picture-in-picture) rules A React version using createPortal to mount the timer in the PiP window A lifecycle pattern: enter / pagehide handling that returns the widget when the window closes A feature-detection snippet for the 2026 support matrix (Chromium 116+, Firefox 151+, no Safari) documentPictureInPicture.requestWindow({ width, height }): the user-gesture contract Forget video.requestPictureInPicture() . Document PiP opens a real window whose document you control: let pipWindow = null; async function openPiP() { const player = document.querySelector("#timer-widget"); // width + height are passed as a pair; needs a user gesture pipWindow = await documentPictureInPicture.requestWindow({ width: 320, height: 200, }); // move the live widget into the PiP window — same node, same state pipWindow.document.body.append(player); // when the window closes, put the widget back…