Picture-in-Picture in Blazor: Using Browser APIs Without Fighting Blazor Server
When we need a new UI feature in Blazor, our default reflex is often to hunt down a NuGet package, a third-party component library, or write an elaborate C# wrapper. But modern browsers already handle many of these capabilities natively—often much better than a custom abstraction would. Picture-in-Picture (PiP) is a classic example. Whether you are floating a video feed or creating an always-on-top dashboard monitor, the browser provides direct APIs to manage these detached windows. However, wiring PiP into a Blazor Server application reveals a subtle architectural trap: browser user-activation requirements . Here is how the Picture-in-Picture APIs work, why standard Blazor @onclick handlers break them, and how to structure JavaScript interop so the browser and server cooperate cleanly. The Blazor Server SignalR Trap Most browser features that affect windowing or OS integration require transient user activation . The browser will only execute methods like video.requestPictureInPictur...
