Arrastra el vídeo a otra esquina
Corner-snapping mini video player
A floating video you drag with inertia that snaps to the nearest corner; double-click it to blow it up in the middle.
Settings
Code
<div class="uvq13-pip"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><p class="hn">Drag the video to another corner</p><div class="scr"></div><button type="button" class="fire">Show video</button><div class="pw" role="region" aria-label="Floating player" tabindex="0"><div class="vd" aria-hidden="true"><i class="sun"></i><i class="cl"></i><i class="h1"></i><i class="h2"></i></div><div class="ct"><button type="button" class="ex" aria-label="Enlarge" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5"/></svg></button><button type="button" class="x" aria-label="Close video"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button><button type="button" class="pl" aria-label="Play" aria-pressed="true"><svg class="i1" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="i2" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14M16 5v14" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/></svg></button></div><i class="pb" aria-hidden="true"><b></b></i></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Picture in picture players follow you around a page, and this one behaves like the native kind. Drag it with mouse or finger and let go: it keeps its momentum and lands in the closest corner with a spring. A double click enlarges it over a dimmed page, the controls appear on hover and the scene is painted in CSS. It fits course platforms, news sites and live streams.
The two colors set the sunset and the hills of the placeholder scene, so swap it for a real video element when you use it. Arrow keys move it between corners, Enter enlarges it and Escape shrinks or hides it.