IconVault logoIconVault
Sign in

Picture-in-Picture Playground - Free Online Tool | IconVault

Learn PiP hands-on: a live canvas feeds a real requestPictureInPicture() window with custom controls and a live event log. Free, in your browser.

All tools

Picture-in-Picture

Canvas-fed video PiP with custom controls and live events

5 of 5 free uses left

Canvas source

PiP enabledChecking…
In PiP nowNo

This is video PiP (requestPictureInPicture), which works in all Chromium and Safari. A separate lab covers Document PiP (custom HTML windows).

PiP events (live)

Enter PiP to watch the events fire. The events come from your browser's real PiP implementation.

Custom controls pattern

// Your page keeps full control:
await video.requestPictureInPicture();
// then drive it from your own UI:
video.play(); video.pause(); video.muted = true;
// or let the user close it programmatically:
await document.exitPictureInPicture();

About this tool

IconVault's Picture-in-Picture Playground feeds an animated canvas (live clock, audio-style bars, or a bouncing ball) into a video element through captureStream(), then opens a genuine picture-in-picture window with requestPictureInPicture(). Your page keeps full control: the custom transport buttons on the page drive the floating window, and every enterpictureinpicture and leavepictureinpicture event lands in a live log with the window size. It is free and runs fully in your browser.

PiP is the browser primitive behind floating video on every video site. This lab makes the whole contract visible: autoplay needs muted playback, entering PiP requires a user gesture, and the floating window is driven by the same video element your page controls, so play, pause, and exit all work from your own UI. Switch canvas sources to see a live stream versus generated content, and take the copyable control pattern back to your own video features.

Frequently asked questions

Popular searches

picture in picturepicture in picture apipip javascriptrequestpictureinpicturepicture in picture tutorialpip html videorequestpictureinpicture exampleexitpictureinpictureenterpictureinpicture eventleavepictureinpicture eventdocument.pictureinpictureenabledpip custom controlscanvas capturestreamcapturestream pippicture in picture demopip playgroundhow to do picture in picture webpip video javascriptfloating video windowpicture in picture chromepicture in picture safaripicture in picture firefoxpip browser supportpip autoplay policypictureinpicturewindowpip window sizevideo pip web developmentpicture in picture mdnpip typescripthtmlvideoelement requestpictureinpicturepicture in picture reactpip event listenerpicture in picture not workingrequestpictureinpicture user gesturepip muted requiredcanvas stream to videolive canvas video streampicture in picture code samplelearn picture in picture apipip controls custompicture in picture overlayweb pip apidocument picture in picture vs video pippip javascript tutorialpicture in picture web appinteractive pip demopip labvideo floating window jspip api example codebrowser pip feature

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →