Autoplay

Media that begins playing without user action.

html

<figure class="autoplay-demo" style="border-color:#E8A020;">
  <video class="autoplay-demo__video" autoplay muted 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%3Ccircle cx='200' cy='112' r='40' fill='%23E8A020'/%3E%3C/svg%3E" aria-label="Autoplay video demo (no audio track)">
    <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
  </video>
  <figcaption class="autoplay-demo__caption" style="color:#E8A020;">Looping preview — muted by default so it can autoplay.</figcaption>
</figure>
<style>
.autoplay-demo { margin: 0; max-width: 360px; padding: 4px; border: 2px solid; border-radius: 12px; background: #241430; }
.autoplay-demo__video { display: block; width: 100%; border-radius: 8px; background: #241430; }
.autoplay-demo__caption { margin: 8px 4px 2px; font: 500 12px/1.4 system-ui, sans-serif; }
</style>

tailwind

<figure class="autoplay-demo-tw m-0 max-w-[360px] p-1 border-2 rounded-xl bg-[#241430]" style="border-color:#E8A020;">
  <video class="block w-full rounded-lg bg-[#241430]" autoplay muted 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%3Ccircle cx='200' cy='112' r='40' fill='%23E8A020'/%3E%3C/svg%3E" aria-label="Autoplay video demo (no audio track)">
    <!-- Provide a real <source src="your-video.mp4" type="video/mp4"> for playback -->
  </video>
  <figcaption class="mt-2 mx-1 text-xs font-medium" style="color:#E8A020;">Looping preview — muted by default so it can autoplay.</figcaption>
</figure>

react

export function AutoplayDemo({
  caption = "Looping preview — muted by default so it can autoplay.",
  autoplay = true,
  muted = true,
  loop = true,
  accent = "#E8A020",
}) {
  return (
    <figure style={{ margin: 0, maxWidth: 360, padding: 4, border: "2px solid", borderColor: accent,
      borderRadius: 12, background: "#241430" }}>
      <video
        style={{ display: "block", width: "100%", borderRadius: 8, background: "#241430" }}
        autoPlay={autoplay}
        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%3Ccircle cx='200' cy='112' r='40' fill='%23E8A020'/%3E%3C/svg%3E"
        aria-label="Autoplay video demo (no audio track)"
      >
        {/* Provide a real <source src="your-video.mp4" type="video/mp4" /> for playback */}
      </video>
      <figcaption style={{ margin: "8px 4px 2px", font: "500 12px/1.4 system-ui, sans-serif", color: accent }}>
        {caption}
      </figcaption>
    </figure>
  );
}