Poster Frame

Still image shown before video playback begins.

html

<div class="pf pf--mint">
  <video class="pf__video" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23241430'/%3E%3Ccircle cx='200' cy='112' r='90' fill='%23FAF7F2' opacity='0.08'/%3E%3C/svg%3E" aria-label="Field recording, take 2">
    <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
    <track kind="captions" srclang="en" label="English" default />
  </video>
  <div class="pf__overlay pf__overlay--dim" aria-hidden="true">
    <svg class="pf__play" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#FAF7F2" fill-opacity="0.92"/><polygon points="10,8 17,12 10,16" fill="#241430"/></svg>
  </div>
  <p class="pf__title">Field recording, take 2</p>
</div>
<style>
.pf { position: relative; max-width: 360px; padding: 4px; border-radius: 12px; border: 2px solid #A8E6C1; background: #FAF7F2; }
.pf--mint { border-color: #A8E6C1; }
.pf--sky { border-color: #BFD9F2; }
.pf--blush { border-color: #F5C2E0; }
.pf__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #241430; }
.pf__overlay { position: absolute; left: 4px; right: 4px; top: 4px; bottom: 36px; display: flex; align-items: center; justify-content: center; pointer-events: none; border-radius: 8px; }
.pf__overlay--dim { background: #241430aa; }
.pf__play { filter: drop-shadow(0 2px 6px rgba(36,20,48,.35)); }
.pf__title { margin: 8px 4px 4px; font: 600 13px/1.4 system-ui, sans-serif; color: #241430; }
</style>

tailwind

<div class="pf-tw pf-tw--mint relative max-w-[360px] p-1 rounded-xl border-2 bg-[#FAF7F2]">
  <video class="block w-full rounded-lg bg-[#241430]" style="aspect-ratio:16/9;" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23241430'/%3E%3Ccircle cx='200' cy='112' r='90' fill='%23FAF7F2' opacity='0.08'/%3E%3C/svg%3E" aria-label="Field recording, take 2">
    <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
    <track kind="captions" srclang="en" label="English" default />
  </video>
  <div class="absolute left-1 right-1 top-1 flex items-center justify-center rounded-lg pointer-events-none pf-tw__overlay--dim" style="bottom:36px;" aria-hidden="true">
    <svg width="40" height="40" viewBox="0 0 24 24" style="filter:drop-shadow(0 2px 6px rgba(36,20,48,.35));"><circle cx="12" cy="12" r="11" fill="#FAF7F2" fill-opacity="0.92"/><polygon points="10,8 17,12 10,16" fill="#241430"/></svg>
  </div>
  <p class="m-0 mt-2 mx-1 text-[13px] font-semibold text-[#241430]">Field recording, take 2</p>
</div>
<style>
.pf-tw--mint { border-color: #A8E6C1; }
.pf-tw--sky { border-color: #BFD9F2; }
.pf-tw--blush { border-color: #F5C2E0; }
.pf-tw__overlay--dim { background: #241430aa; }
</style>

react

export function PosterFrame({
  theme = "mint",
  title = "Field recording, take 2",
  playIconSize = 40,
  dimmed = true,
}) {
  const border = { mint: "#A8E6C1", sky: "#BFD9F2", blush: "#F5C2E0" }[theme] ?? "#A8E6C1";
  return (
    <div style={{ position: "relative", maxWidth: 360, padding: 4, borderRadius: 12, border: `2px solid ${border}`, background: "#FAF7F2" }}>
      <video
        style={{ display: "block", width: "100%", aspectRatio: "16 / 9", borderRadius: 8, background: "#241430" }}
        controls
        poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23241430'/%3E%3Ccircle cx='200' cy='112' r='90' fill='%23FAF7F2' opacity='0.08'/%3E%3C/svg%3E"
        aria-label={title}
      >
        {/* Provide a real <source src="your-video.mp4" type="video/mp4" /> for playback */}
        <track kind="captions" srcLang="en" label="English" default />
      </video>
      <div style={{ position: "absolute", left: 4, right: 4, top: 4, bottom: 36, display: "flex", alignItems: "center",
        justifyContent: "center", pointerEvents: "none", borderRadius: 8, background: dimmed ? "#241430aa" : "transparent" }} aria-hidden="true">
        <svg width={playIconSize} height={playIconSize} viewBox="0 0 24 24" style={{ filter: "drop-shadow(0 2px 6px rgba(36,20,48,.35))" }}>
          <circle cx="12" cy="12" r="11" fill="#FAF7F2" fillOpacity="0.92" />
          <polygon points="10,8 17,12 10,16" fill="#241430" />
        </svg>
      </div>
      <p style={{ margin: "8px 4px 4px", font: "600 13px/1.4 system-ui, sans-serif", color: "#241430" }}>{title}</p>
    </div>
  );
}