Arrastra el vídeo a otra esquina

HTML + CSSOverlays

Mini reproductor que se ancla a las esquinas

Un vídeo flotante que arrastras con inercia y se pega a la esquina más cercana; con doble clic se amplía en el centro.

Ajustes

16px
1x

Código

<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">Arrastra el vídeo a otra esquina</p><div class="scr"></div><button type="button" class="fire">Mostrar vídeo</button><div class="pw" role="region" aria-label="Reproductor flotante" 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="Ampliar" 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="Cerrar vídeo"><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="Reproducir" 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 para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Los reproductores en miniatura te acompañan por la página, y este se porta como el nativo. Arrástralo con el ratón o el dedo y suéltalo: conserva el impulso y cae con un muelle en la esquina más cercana. Con doble clic se amplía sobre la página oscurecida y los controles salen al pasar por encima. Encaja en plataformas de cursos, webs de noticias y directos.

Los dos colores marcan el atardecer y las colinas de la escena de ejemplo, así que cámbiala por un elemento de vídeo real al usarlo. Las flechas lo mueven entre esquinas, Enter lo amplía y Escape lo reduce o lo oculta.