# Video Autoplay on iOS

**MUST** · **ID:** `interactions-video-autoplay-ios` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-video-autoplay-ios

> MUST: Autoplaying `<video>` needs `muted` and `playsInline` — without both, iOS Safari blocks playback or forces fullscreen.

Apply muted and playsInline to video tags to enable autoplay on iOS

iOS Safari blocks video autoplay unless the video is muted and has the playsinline attribute. Without these, the video won't play automatically and may open in fullscreen instead.

## Rule snippet

```tsx
<video autoPlay muted loop playsInline src="/clip.mp4" />
```

## Bad — do not do this

`interactions-video-autoplay-ios-bad`

```tsx
export function VideoAutoplayIOSBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <div className="bg-muted rounded-lg aspect-video flex items-center justify-center">
          <span className="text-muted-foreground text-xs">Video won't autoplay on iOS</span>
        </div>
        <pre className="text-xs bg-muted rounded p-2 text-foreground overflow-x-auto"><code>{`<video autoPlay loop>
  <source src="hero.mp4" />
</video>`}</code></pre>
      </div>
      <p className="text-xs text-error">Missing muted and playsInline — won't autoplay on iOS</p>
    </div>
  );
}
```

## Good — do this

`interactions-video-autoplay-ios-good`

```tsx
export function VideoAutoplayIOSGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <div className="bg-muted rounded-lg aspect-video flex items-center justify-center">
          <span className="text-success text-xs">✓ Video autoplays on iOS</span>
        </div>
        <pre className="text-xs bg-muted rounded p-2 text-foreground overflow-x-auto"><code>{`<video autoPlay loop muted playsInline>
  <source src="hero.mp4" />
</video>`}</code></pre>
      </div>
      <p className="text-xs text-success">muted + playsInline enables autoplay on iOS Safari</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)
- [WebKit Video Policies](https://webkit.org/blog/6784/new-video-policies-for-ios/)