Arrastra el vídeo a otra esquina

HTML + CSSOverlays

Mini-Player, der an Ecken einrastet

Ein schwebendes Video, das du mit Schwung ziehst und das an der nächsten Ecke einrastet; Doppelklick vergrößert es mittig.

Einstellungen

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">Zieh das Video in eine andere Ecke</p><div class="scr"></div><button type="button" class="fire">Video zeigen</button><div class="pw" role="region" aria-label="Schwebender 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="Vergrößern" 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="Video schließen"><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="Abspielen" 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 für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Bild-in-Bild-Player begleiten dich über die Seite, und dieser verhält sich wie der native. Zieh ihn mit Maus oder Finger und lass los: Er behält seinen Schwung und landet federnd in der nächsten Ecke. Ein Doppelklick vergrößert ihn über der abgedunkelten Seite, die Steuerung erscheint beim Überfahren und die Szene ist in CSS gemalt. Passt zu Kursplattformen, Nachrichtenseiten und Livestreams.

Die beiden Farben bestimmen Sonnenuntergang und Hügel der Platzhalterszene, im Einsatz ersetzt du sie durch ein echtes Video. Pfeiltasten wechseln die Ecke, Enter vergrößert, Escape verkleinert oder blendet ihn aus.