Video Player

Component for video playback.

html

<div class="vp vp--mint">
  <video class="vp__video" controls   playsinline 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%3Cpolygon points='170,80 170,145 235,112' fill='%23FAF7F2'/%3E%3C/svg%3E" aria-label="Product walkthrough">
    <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
    <track kind="captions" srclang="en" label="English" default />
  </video>
  <p class="vp__title">Product walkthrough</p>
</div>
<style>
.vp { max-width: 360px; padding: 4px; border-radius: 12px; border: 2px solid #A8E6C1; background: #FAF7F2; }
.vp--mint { border-color: #A8E6C1; }
.vp--sky { border-color: #BFD9F2; }
.vp--blush { border-color: #F5C2E0; }
.vp__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #241430; }
.vp__title { margin: 8px 4px 4px; font: 600 13px/1.4 system-ui, sans-serif; color: #241430; }
</style>

tailwind

<div class="vp-tw vp-tw--mint 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   playsinline 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%3Cpolygon points='170,80 170,145 235,112' fill='%23FAF7F2'/%3E%3C/svg%3E" aria-label="Product walkthrough">
    <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
    <track kind="captions" srclang="en" label="English" default />
  </video>
  <p class="m-0 mt-2 mx-1 text-[13px] font-semibold text-[#241430]">Product walkthrough</p>
</div>
<style>
.vp-tw--mint { border-color: #A8E6C1; }
.vp-tw--sky { border-color: #BFD9F2; }
.vp-tw--blush { border-color: #F5C2E0; }
</style>

react

export function VideoPlayer({
  title = "Product walkthrough",
  theme = "mint",
  controlsOn = true,
  muted = false,
  loop = false,
}) {
  const border = { mint: "#A8E6C1", sky: "#BFD9F2", blush: "#F5C2E0" }[theme] ?? "#A8E6C1";
  return (
    <div style={{ 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={controlsOn}
        muted={muted}
        loop={loop}
        playsInline
        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%3Cpolygon points='170,80 170,145 235,112' fill='%23FAF7F2'/%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>
      <p style={{ margin: "8px 4px 4px", font: "600 13px/1.4 system-ui, sans-serif", color: "#241430" }}>{title}</p>
    </div>
  );
}