Issues with MP4 videos on iOS and Safari
When traffic is proxied through Cloudflare, Safari on macOS and iOS devices may fail to load MP4 video files.
This issue occurs because Safari handles HTTP range requests differently than other browsers, particularly in how it processes ETags during video streaming.
Safari and iOS devices rely on HTTP range requests to support video features such as seeking to specific timestamps and resuming interrupted downloads.
When Cloudflare's caching layer processes these range requests with weak ETags, Safari may reject the cached response entirely, resulting in videos that fail to load or display as black screens.
To resolve this issue, configure two cache rules in the following order.
Create a cache rule that applies to all MP4 files, marks them as eligible for cache, and turns on the Respect Strong ETags setting.
-
In the Cloudflare dashboard, go to the Cache Rules page.
Go to Cache Rules -
Select Create rule > Cache rules.
-
Enter a descriptive name for the rule in Rule name.
-
In the When incoming requests match… section, create a filter that applies to all MP4 files, for example
URI FullWildcard*.mp4. -
Select Eligible for cache in the Cache eligibility section.
-
Select + Add Setting for Respect strong ETags and turn on the toggle.
-
Select Last as Place at.
Create another cache rule that applies to all MP4 files and bypasses cache entirely.
-
In the Cloudflare dashboard, go to the Cache Rules page.
Go to Cache Rules -
Select Create rule > Cache rules.
-
Enter a descriptive name for the rule in Rule name.
-
In the When incoming requests match… section, create the same filter for MP4 files, for example
URI FullWildcard*.mp4. -
Select Bypass cache in the Cache eligibility section.
-
Select Last as Place at.
The first rule preserves strong ETags for MP4 files, which satisfies Safari's requirements for range request handling. The second rule bypasses cache so that Cloudflare forwards range requests to the origin server instead of serving cached responses with potentially mismatched ETags.
The first rule must appear above the second rule in the Cache Rules list.