# Gabriel Kanev
> Source: https://gkanev.com/posts/mp4-safari-and-cloudflare-a-love-hate-relationship/
> Machine-readable version - 2026-09-06
---
Skip to main contentESC[Image: Cloudflare MP4 Safari]
When deploying videos through Cloudflare, developers frequently run into playback issues in Safari and iOS environments. The core problem is how Cloudflare manages video file headers during caching and delivery.
## The Technical Issue
Safari requires specific HTTP headers for video playback: the `206 Partial Content` response and `Accept-Ranges: bytes`. These enable byte-range requests essential for video seeking and autoplay. Cloudflare’s caching methodology can interfere with these requirements, preventing Safari from properly handling video streams.
## Five Solutions, Ranked by Success Rate
**1. Alternative hosting** - Host videos outside Cloudflare or disable the orange cloud proxy for video domains. The most reliable fix.
**2. Web-optimize videos** - Use tools like Handbrake to create Safari-compatible MP4 files with the correct codec and container settings.
**3. Exclude from caching** - Create Cloudflare page rules to bypass caching for MP4 files entirely.
**4. Server-side configuration** - Disable gzip compression for video files in your Nginx or Apache configuration:
```
# Nginx example
location ~* \.(mp4|webm)$ {
gzip off;
add_header Accept-Ranges bytes;
}
```
**5. Verify HTML markup** - Ensure proper video tag implementation with all required attributes:
```
<video autoplay muted loop playsinline>
<source src="video.mp4" type="video/mp4">
video>
```
The `playsinline` attribute is critical for iOS Safari - without it, videos won’t autoplay inline.
Start with option 1 if you can. If you’re stuck with Cloudflare on the video domain, option 3 or 4 usually does the trick.
Share[X / Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgkanev.com%2Fposts%2Fmp4-safari-and-cloudflare-a-love-hate-relationship%2F&text=Mp4%2C%20Safari%2C%20and%20Cloudflare%20%E2%80%93%20a%20Love-Hate%20Relationship)[LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fgkanev.com%2Fposts%2Fmp4-safari-and-cloudflare-a-love-hate-relationship%2F&title=Mp4%2C%20Safari%2C%20and%20Cloudflare%20%E2%80%93%20a%20Love-Hate%20Relationship)
## Navigation
- [About](/about-me/)
- [Uses](/uses/)
- [Now](/now/)
- [Resources & Guides](/resources-and-guides/)
- [Speaking](/speaking/)
- [Writing](/posts/)
- [Work & Experience](/work/)
- [Projects](/projects/)
- [Books](/books/)
- [Research Publications](/research-publications/)
- [Contact me](/contact-me/)
- [Home](/)
- [Design Kit](/design-kit/)
- [FAQ](/faq/)
- [Sitemap](/sitemap/)
- [Sustainability](/sustainability/)
- [Product Strategy](/product-strategy/)
- [Consulting](/consulting/)
- [Performance Audits](/performance-audits/)
- [Audits & Assessments](/audits/)
- [Sponsoring](/sponsoring/)
- [LinkedIn](https://linkedin.com/in/mrgkanev/)
- [X (formerly Twitter)](https://twitter.com/mrgkanev/)
- [GitHub](https://github.com/mrgkanev/)
- [YouTube](https://youtube.com/@mrgkanev/)
- [RSS](/rss.xml)
- [Atom](/atom.xml)
- [JSON Feed](/feed.json)
- [Privacy Policy](/privacy-policy/)
- [Terms & Conditions](/terms-and-conditions/)
- [Accessibility](/accessibility-statement/)
---
Generated by astro-inference | https://gkanev.com/llms.txt