CloudFlare MP4 IOS
MP4 wont load on iOS devices - MP4 Wont Load in Safari Using CloudFlare
Mp4 videos do not play - Problem in loading website in IOS device
Video plays in other browsers, but not Safari




In Clouflare:

  1. Activate DEVELOPMENT MODE (in Overview page)
  2. Disable Proxy (in DNS section)
    Videos then played in iOS Safari and error message disapeared.

(NOTE: Development Mode OFF, Proxy re-enabled)
Doing the following two steps fixed the mp4 playback issue on IOS:
A) In Cloudflare, add PAGE exception:
Cache Level: Bypass Cache

B) In .htaccess of website,
add the following line to disable mod_deflate for mp4 video:
SetEnvIfNoCase Request_URI .(mp4|ogv|webm)$ no-gzip dont-vary

IPHONE Cache Reinstall / Clear Apps


Just a heads up to anyone still having problems with this

I have played around with this a fair bit and this seems to be a mix between CF returning a 200 Status for video files and Safari only accepting a 206 Status for video
Chrome and Firefox are fine with a 200 Status. However; Safari on both iOS and OS seems to throw in the towel.

I think the issue is caused by having a Cache Everything rule on a domain/media directory. This is recommended fairly widely as a way max out the edge-cache lifespan for static assets.

The solution is to exclude mp4/whatever your video file of choice is from the cache. You can prioritise a second rule after the cache everything rule
Cache Level: Bypass Cache
This results in mp4s being served up from origin with a correct 206 header.
Long term either CF needs to modify the header on video assets to return a 206 status code; or we need to wait for Safari to sort out how it handles media with a 200 status.

I manage to workaround this by creating an subdomain e leave it outside CF and upload the video and link this URL for the background video, now it is working again.


Add exactly the following at the end should work (if dont, depending on your file complexity, copy it more on top):

# To make MP3 streaming on Safari with Cloudflare CF
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary

.mp4 playback has been a problem for many folks migrating to Cloudflare. After reviewing fixes on previous posts and finding they did nothing for me, I wanted to share what worked in my situation.
e.g. these steps didnt work (bypass page rule, .htaccess)
My setup: Self-hosted Rails server, Nginx -> .mp4 videos didnt play back in Safari on Mac or iOS. Playback in chrome works great.
I resolved my Safari .mp4 playback by changing my gzip compression settings in my nginx.conf, to remove gzip compression of .mp4 files.

Heres the block in nginx for reference. (Note: depending on how your app is configured, you may need to change the location line to location ~ \.mp4$ {

location ~ ^/(assets|system|videos)/  {    expires max;    add_header Cache-Control public;    add_header ETag "";    gzip on;    gzip_http_version 1.1;    gzip_vary on;    gzip_comp_level 6;    gzip_proxied any;     # Reference configuration    #gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript video/mp4 application/mp4 image/jpeg image/png image/svg+xml application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/;     # Fix cloudflare by removing the mp4 settings    gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript image/jpeg image/png image/svg+xml application/application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/; }

A few things to fiddle with on the server: Remove Etag Make sure files are being served in full rather