---
title: "HTML5 Video — playsInline + MP4-First Source Order for iOS Safari"
tags: [html, video, ios, safari, react, frontend]
source: daily/2026-05-14.md
created: 2026-05-15
---

# HTML5 Video — `playsInline` + MP4-First Source Order for iOS Safari

## Required Attributes for Inline Autoplay

```html
<!-- ALL four attributes required for silent autoplay on iOS Safari -->
<video playsInline autoPlay muted loop>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
</video>
```

In React/JSX: use `playsInline` (camelCase), not `playsinline`.

## `<source>` Order Matters

**MP4 must be listed first.** Safari reads `<source>` tags in order and stops at the first it can decode. WebM is not supported by Safari — if WebM is listed first, Safari stalls and never attempts MP4.

| Order | Result |
|-------|--------|
| MP4 → WebM | Safari plays MP4 ✓ |
| WebM → MP4 | Safari stalls silently ✗ |

## Why `playsInline` Is Required

Without `playsInline`, iOS Safari forces the video into native fullscreen on play — breaking hero sections, background videos, and looping banners. The video appears to do nothing (silent refusal).

## Full Checklist for iOS Autoplay

- [x] `playsInline` (camelCase in JSX)
- [x] `autoPlay` (camelCase in JSX)
- [x] `muted` — iOS does NOT allow autoplay with audio
- [x] `loop` (if looping)
- [x] MP4 source listed before WebM
- [x] Video file served with correct `Content-Type: video/mp4`

## Diagnostic

Video plays on desktop Chrome/Firefox but not iOS Safari → check `playsInline` first. Video plays on iOS Safari but shows a full-screen takeover → `playsInline` missing.
