Arrastra el vídeo a otra esquina

HTML + CSSOverlays

Mini-lecteur aimanté aux coins

Une vidéo flottante lancée avec élan qui se colle au coin le plus proche ; un double clic l'agrandit au centre.

Réglages

16px
1x

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">Fais glisser la vidéo vers un autre coin</p><div class="scr"></div><button type="button" class="fire">Afficher la vidéo</button><div class="pw" role="region" aria-label="Lecteur flottant" 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="Agrandir" 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="Fermer la vidéo"><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="Lire" 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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Overlays

Voir tout : Overlays

Où l’utiliser

Les lecteurs en incrustation te suivent sur la page, et celui-ci se comporte comme le lecteur natif. Fais-le glisser à la souris ou au doigt puis lâche : il garde son élan et se pose avec un rebond dans le coin le plus proche. Un double clic l'agrandit sur la page assombrie et les commandes apparaissent au survol. Idéal pour les cours en ligne et les directs.

Les deux couleurs règlent le coucher de soleil et les collines de la scène d'exemple, à remplacer par une vraie vidéo. Les flèches changent de coin, Entrée agrandit et Échap réduit ou masque le lecteur.