Introduction
Your WordPress video works flawlessly on desktop and Android — but when you open the same page on an iPhone or iPad in Safari, the MP4 refuses to play. If you’ve noticed this problem only after enabling Cloudflare proxy (orange cloud), you’re not alone.
At ForthFocus, we ran into the same frustrating issue. The videos worked perfectly when Cloudflare was bypassed (gray cloud), but broke the moment Cloudflare’s proxy was active. After extensive debugging, we discovered that this problem isn’t caused by WordPress or Elementor — it’s Cloudflare’s handling of MP4 files that confuses iOS Safari.
The good news? We found a simple .htaccess solution that restores video playback on all iOS devices, while keeping Cloudflare proxy ON for performance and security. Here’s the exact fix.
Symptoms (Cloudflare-specific)
- Site proxied through Cloudflare (orange cloud).
- MP4 plays on desktop & Android, fails on iOS Safari (iPhone, iPad).
- Safari console shows: “Failed to load resource: Plug-in handled load.”
- Turning Cloudflare proxy OFF (gray cloud) makes the video work immediately.
Conclusion: Cloudflare’s edge delivery is interfering with MP4 playback on iOS Safari.
Failed Attempts Before the Fix
We tried all the common recommendations before landing on the real solution:
- Page Rule → Cache Level: Bypass for
.mp4 - Disabled Brotli, Auto Minify, Polish, Rocket Loader
- Purged Cloudflare & WordPress caches
These sometimes help in certain setups but didn’t solve it consistently for us.
✅ The Working Fix (Without Turning Off Cloudflare)
Add this block at the very end of your site’s .htaccess.
It targets only MP4s inside /wp-content/uploads/ and leaves everything else (HTML, CSS, JS) fully optimized and proxied.
# === Clean passthrough for MP4s in /wp-content/uploads (Cloudflare-safe) ===
<IfModule mod_setenvif.c>
SetEnvIfNoCase Request_URI "^/wp-content/uploads/.*\.mp4$" IS_UPLOADS_MP4=1
</IfModule>
<IfModule mod_headers.c>
Header set Accept-Ranges "bytes" env=IS_UPLOADS_MP4
Header set Cache-Control "public, max-age=31536000, no-transform" env=IS_UPLOADS_MP4
Header unset Content-Encoding env=IS_UPLOADS_MP4
Header unset ETag env=IS_UPLOADS_MP4
</IfModule>
<IfModule mod_deflate.c>
SetEnvIfNoCase Request_URI "^/wp-content/uploads/.*\.mp4$" no-gzip=1
</IfModule>
<IfModule mod_brotli.c>
SetEnvIfNoCase Request_URI "^/wp-content/uploads/.*\.mp4$" no-brotli=1
</IfModule>
# === End MP4 passthrough ===
Why it Works
- no-gzip / no-brotli → prevents compression that Safari rejects for MP4 streams.
- Cache-Control: no-transform → stops CDNs from altering video delivery.
- Accept-Ranges: bytes → allows Safari to request partial segments (essential for seeking).
- Scoped only to MP4s → everything else stays optimized by Cloudflare and caching plugins.
Steps
- Edit
.htaccess→ paste the snippet at the end. - Empty caches in WordPress (e.g., W3 Total Cache).
- Cloudflare → Purge Cache → Custom purge the MP4 URLs.
- Test the direct MP4 URL and the page embed on an iPhone/iPad Safari.
Verify with Curl
curl -I https://example.com/wp-content/uploads/2025/07/video.mp4
You should see:
- ✅
Cache-Control: ... no-transform - ✅
Accept-Ranges: bytes - ❌ no
Content-Encoding(no gzip/br)
When This Post Does NOT Apply
- Your site is not behind Cloudflare proxy (orange cloud).
- You embed from YouTube/Vimeo (different delivery).
- Your MP4 isn’t encoded in iOS-compatible codec (fix by exporting in H.264 + AAC with
+faststart).
Alternatives for Heavy Video Sites
- Cloudflare Stream (paid) → Cloudflare’s video hosting with adaptive streaming.
- HLS (.m3u8) → iOS-native adaptive streaming format.
- Media subdomain → Serve videos from
media.yourdomain.comwith Cloudflare proxy disabled while keeping main site proxied.
FAQ
This issue occurs because Cloudflare applies compression or transformation to MP4 files, which Safari on iOS cannot handle. The solution is to disable compression/optimization for MP4 files using an .htaccess rule, so the videos load normally on iOS devices.
To fix this, add rules in your .htaccess file that prevent Cloudflare (and caching plugins) from applying compression to MP4 files. This ensures iOS Safari can play the videos correctly without requiring you to turn off Cloudflare’s proxy for your whole site.
No. The issue happens on any site using Cloudflare proxy to serve MP4 videos to Safari on iOS. However, many WordPress site owners notice it because they often embed videos through Elementor or other page builders.
No. You don’t have to disable Cloudflare globally. Instead, you can keep the proxy ON and only bypass compression for MP4 files. This way, your site still benefits from Cloudflare speed and security features while fixing video playback on iOS Safari.
Yes. Once applied, the fix works for all iOS devices — including iPhones, iPads, and Safari on Mac. Your MP4 videos will play correctly across all Apple devices.
Conclusion
If your WordPress MP4 videos won’t play on iPhone, iPad, or Safari when using Cloudflare, don’t disable the entire proxy. The issue comes from how Cloudflare and caching plugins compress video files. By adding a simple .htaccess block that tells servers and CDNs to leave MP4s untouched, you can fix the playback issue and keep Cloudflare ON for everything else.
We at ForthFocus tested this across multiple client sites — it works consistently, it’s safe, and it only applies to MP4 videos.
If you’d rather let experts handle this for you, we specialize in WordPress performance, Cloudflare optimization, and digital solutions.
Need Help Fixing This on Your Website?
At ForthFocus, we specialize in WordPress performance, Cloudflare setup, and web optimizations. If you’d rather let the experts handle it, we’re here to help.
Talk to ForthFocus →