Creating Web Widgets Using the Document Picture-in-Picture API
Learn how to build floating web widgets like live stock tickers and to-do lists using JavaScript and the Document Picture-in-Picture API, featured on CSS-Tricks.
Stock photo for illustration only, not from the actual event
- Use the Document Picture-in-Picture API to create floating windows for web widgets
- Support cloning HTML, CSS, and JavaScript elements into separate windows
- Must open demos in debug mode to bypass iframe limitations using Chrome or Firefox
- Manage existing windows by writing toggle logic to close active DPIP windows
Document Picture-in-Picture windows, or DPIP windows, function effectively as floating web widgets. Developers can utilize them for floating stock tickers, live chat conversations, playlists, notes, or spreadsheets—anything that needs to remain visible on the screen at all times by embedding HTML, CSS, and JavaScript inside them.
An insightful guide by CSS-Tricks explores cloning a stock ticker from the main document into a DPIP window. This approach highlights relevant media queries and pseudo-classes for targeted styling, while serving as a reminder that removing an HTML component from its original context can break its CSS styling.
Stock photo for illustration only, not from the actual event
For the implementation to function correctly, developers must open the demo in debug mode because picture-in-picture capabilities are unsupported in nested browsing contexts such as CodePen iframes. Furthermore, Safari lacks support for the DPIP API, requiring users to rely on browsers like Chrome or Firefox instead.
Regarding JavaScript integration, checking browser support requires programmatic verification because feature queries using @supports with @media (display-mode: picture-in-picture) are currently limited since the at-rule() function is only supported by Chrome.
The Document Picture-in-Picture API represents a major leap forward by expanding picture-in-picture capabilities beyond simple video elements into fully interactive HTML and DOM content. This empowers web apps to deliver desktop-like floating widget experiences. However, developers must carefully manage cross-browser compatibility gaps and handle CSS scoping issues properly when DOM nodes are transferred across different window contexts.
When handling existing DPIP windows, triggering the creation button a second time closes the active window, effectively turning the button into a toggle control. Options for creating these windows include setting custom width and height parameters together, or letting the browser determine dimensions automatically. Additional configurations include preferInitialWindowPlacement to override saved window positions.
Cloning HTML content into the DPIP window involves utilizing querySelectorAll() to generate a NodeList array, createDocumentFragment() to build an arbitrary DOM tree, and looping through nodes with forEach(). Appending the entire document fragment directly to the
of the DPIP window triggers only a single reflow instead of multiple, resulting in significantly better performance.Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment