Solved: MP4 Playback in Safari Broken with Cloudfare (nginx server)

Hi all, excited to join Cloudflare.

.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 didn’t work (bypass page rule, .htaccess) MP4 Won't Load in Safari Using CloudFlare

My setup: Self-hosted Rails server, Nginx -> .mp4 videos didn’t 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.

Here’s 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/vnd.ms-fontobject;

   # Kelton trying to 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/vnd.ms-fontobject;
}

A post was merged into an existing topic: MP4 Won’t Load in Safari Using CloudFlare