Picture-in-Picture

Floating mini video player.

html

<div class="pip-stage">
  <div class="pip-stage__page" aria-hidden="true">
    <svg viewBox="0 0 380 220" width="100%" height="100%"><rect width="380" height="220" fill="#FAF7F2"/><rect x="20" y="20" width="180" height="14" rx="7" fill="#24143022"/><rect x="20" y="46" width="260" height="10" rx="5" fill="#24143014"/><rect x="20" y="66" width="220" height="10" rx="5" fill="#24143014"/></svg>
  </div>
  <div class="pip pip--bottom-right" style="width:160px;border-color:#BFD9F2;">
    <video class="pip__video" muted autoplay loop playsinline aria-label="Picture-in-picture video">
      <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
    </video>
    
    <button class="pip__close" type="button" aria-label="Close picture-in-picture" style="background:#BFD9F2;">&times;</button>
    
  </div>
</div>
<style>
.pip-stage { position: relative; max-width: 380px; aspect-ratio: 380 / 220; border-radius: 10px; overflow: hidden; border: 1px solid #24143022; }
.pip-stage__page { position: absolute; inset: 0; }
.pip { position: absolute; border-radius: 8px; border: 2px solid; overflow: hidden; box-shadow: 0 8px 20px rgba(36,20,48,.28); background: #241430; }
.pip--bottom-right { right: 10px; bottom: 10px; }
.pip--bottom-left { left: 10px; bottom: 10px; }
.pip--top-right { right: 10px; top: 10px; }
.pip--top-left { left: 10px; top: 10px; }
.pip__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #241430; }
.pip__close { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; color: #241430; font-size: 13px; line-height: 1; cursor: pointer; }
</style>

tailwind

<div class="pip-stage-tw relative max-w-[380px] rounded-[10px] overflow-hidden border border-[#24143022]" style="aspect-ratio:380/220;">
  <div class="absolute inset-0" aria-hidden="true">
    <svg viewBox="0 0 380 220" width="100%" height="100%"><rect width="380" height="220" fill="#FAF7F2"/><rect x="20" y="20" width="180" height="14" rx="7" fill="#24143022"/><rect x="20" y="46" width="260" height="10" rx="5" fill="#24143014"/><rect x="20" y="66" width="220" height="10" rx="5" fill="#24143014"/></svg>
  </div>
  <div class="pip-tw pip-tw--bottom-right absolute rounded-lg border-2 overflow-hidden bg-[#241430]" style="width:160px;border-color:#BFD9F2;box-shadow:0 8px 20px rgba(36,20,48,.28);">
    <video class="block w-full bg-[#241430]" style="aspect-ratio:16/9;" muted autoplay loop playsinline aria-label="Picture-in-picture video">
      <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
    </video>
    
    <button class="absolute top-1 right-1 w-5 h-5 rounded-full border-0 text-[#241430] text-[13px] leading-none cursor-pointer" type="button" aria-label="Close picture-in-picture" style="background:#BFD9F2;">&times;</button>
    
  </div>
</div>
<style>
.pip-tw--bottom-right { right: 10px; bottom: 10px; }
.pip-tw--bottom-left { left: 10px; bottom: 10px; }
.pip-tw--top-right { right: 10px; top: 10px; }
.pip-tw--top-left { left: 10px; top: 10px; }
</style>

react

export function PictureInPicture({
  corner = "bottom-right",
  width = 160,
  accent = "#BFD9F2",
  closeBtn = true,
}) {
  const pos = {
    "bottom-right": { right: 10, bottom: 10 },
    "bottom-left": { left: 10, bottom: 10 },
    "top-right": { right: 10, top: 10 },
    "top-left": { left: 10, top: 10 },
  }[corner] ?? { right: 10, bottom: 10 };
  return (
    <div style={{ position: "relative", maxWidth: 380, aspectRatio: "380 / 220", borderRadius: 10,
      overflow: "hidden", border: "1px solid #24143022" }}>
      <div style={{ position: "absolute", inset: 0 }} aria-hidden="true">
        <svg viewBox="0 0 380 220" width="100%" height="100%">
          <rect width="380" height="220" fill="#FAF7F2" />
          <rect x="20" y="20" width="180" height="14" rx="7" fill="#24143022" />
          <rect x="20" y="46" width="260" height="10" rx="5" fill="#24143014" />
          <rect x="20" y="66" width="220" height="10" rx="5" fill="#24143014" />
        </svg>
      </div>
      <div style={{ position: "absolute", ...pos, width, borderRadius: 8, border: `2px solid ${accent}`,
        overflow: "hidden", boxShadow: "0 8px 20px rgba(36,20,48,.28)", background: "#241430" }}>
        <video style={{ display: "block", width: "100%", aspectRatio: "16 / 9", background: "#241430" }}
          muted autoPlay loop playsInline aria-label="Picture-in-picture video">
          {/* Provide a real <source src="your-video.mp4" type="video/mp4" /> for playback */}
        </video>
        {closeBtn && (
          <button type="button" aria-label="Close picture-in-picture"
            style={{ position: "absolute", top: 4, right: 4, width: 20, height: 20, borderRadius: "50%",
              border: "none", color: "#241430", fontSize: 13, lineHeight: 1, cursor: "pointer", background: accent }}>
            &times;
          </button>
        )}
      </div>
    </div>
  );
}