Picture-in-Picture Video Card — Free HTML CSS JS Snippet

YouTube, Google Meet, FaceTime, and most video-call apps all share the same floating mini-player pattern: a small video window you can drag anywhere on screen, that automatically snaps itself to whichever corner it ended up closest to once you let go, and that you can flick toward an edge to dismiss entirely. None of that behavior comes from a native browser API for free — the real document.pictureInPicture API only gives you an OS-level floating window with no custom drag physics or corner-snap logic at all. This snippet rebuilds the *interaction design* of picture-in-picture entirely in userland: pointer events for dragging, a nearest-corner distance calculation for the snap, and a velocity-based threshold for the dismiss gesture.

Tracking the drag with pointer events, not mouse events

The player listens for pointerdown, pointermove, and pointerup rather than the older mousedown/mousemove/mouseup trio, because pointer events unify mouse, touch, and pen input behind one API — the same code drags correctly whether you are using a trackpad or a phone screen. setPointerCapture(pointerId) is called on pointerdown, which is the detail most drag implementations skip: it guarantees that subsequent pointermove and pointerup events keep firing on the player element even if the pointer moves faster than the browser can track and briefly leaves the element's bounds mid-drag — without it, a fast drag can "lose" the element and stop responding.

The corner-snap distance math

snapToNearestCorner() is the heart of the interaction. On release, it computes the player's current center point, builds an array of the four candidate corner positions (each already inset by MARGIN pixels and, critically, accounting for the player's own width and height so the bottom-right and bottom-left corners are anchored by the player's far edge, not its top-left origin), then loops over all four computing Math.hypot(cx - cornerCenterX, cy - cornerCenterY) — literally the straight-line Euclidean distance from the player's center to each corner's would-be center. Whichever corner produces the smallest distance is the target; a CSS transition on left/top (only added via the .snapping class at the moment of release, never during the drag itself) animates the move with an overshoot-flavored cubic-bezier curve so the snap feels alive rather than mechanical.

The flick-to-dismiss velocity and distance thresholds

Every pointermove computes an instantaneous velocity in pixels per millisecond by dividing the distance moved since the last event by the elapsed time (dt), continuously overwriting velocityX/velocityY so that by the time pointerup fires, those variables hold the true velocity of the final flick motion — not an average over the whole drag. shouldDismiss() then combines two independent signals: a distance check (has the player actually been dragged more than FLICK_DISTANCE pixels past the stage's edge already?) and a velocity-plus-direction check (is the player currently near an edge, and is it moving fast enough, *and in that edge's outward direction specifically*?). That direction qualifier is the detail that prevents false positives — without it, a fast flick from the top-left corner back toward the center of the screen would trigger a dismiss simply because the speed was high, even though the user was clearly moving the player further onto the stage, not off it.

Why a dismissed player gets an undo toast instead of vanishing silently

A flick gesture is easy to trigger by accident, especially on touch, and losing a floating video player with no way to get it back is a frustrating dead end — the same reason Gmail's "Archive" and most delete actions surface an undo toast instead of committing instantly. dismiss() saves the player's exact position and minimized state into lastPosition before animating it off-screen, and the toast's Undo button calls undoDismiss(), which restores the saved position, clears the fly-away transform, and re-displays the player exactly as it was — a full round trip, not just a re-show.

Minimize/expand and re-clamping to the stage

toggleMinimize() swaps the player between its full mini-player size and a small circular bubble via the .minimized class. Because the bubble is much smaller than the full player, simply keeping the same left/top could leave it not snapped to any edge cleanly, so after the size change is applied, the function re-clamps the position on the next animation frame using the corner's known margin bounds, keeping the toggle visually anchored near where it already was rather than jumping unexpectedly.