Recently during a web build I ran into a bug that caused MP4 background video to not load properly on iOS because of the following error:
Media error: Format(s) not supported or source(s) not found Download File: https://mysite.com/wp-content/uploads/2020/03/image.mp4
This caused a lot of headache for me because it was working perfectly on my staging site, but only had an issue when on production with Cloudflare hooked up. I was able to come up with a workaround solution to get it working again, hopefully it can help you as well.
Web Server Info:
Website Info:
PHP 7.3, WordPress 5.4 and Elegant Theme’s Divi Builder Version 4.4.3 on the webserver.
Cloudflare Settings:
SSL Full, Always Use HTTPS on, Opportunistic Encryption On, TSL 1.3 On, Automatic HTTPS Rewrites Off, Polish On Lossy (WebP), Brotli On, Rocket Loader Off, Mirage Off, TCP Turbo Enabled, Enhanced HTTP/2 Prioritization Off
The Goal:
The design called for a video to load automatically full screen. This can be achieved by using Divi’s “Background Video MP4”.
As shown in the screen shot, it’s a fairly simple setup. In the “Row Settings” -> “Content” -> “Background” -> “Background Video MP4” an MP4 was loaded. The staging was working with no problem.
After some configuration of the row size things were all set.
The Problem
Once the website was live and ready to go, the website was migrated to the production location with Cloudflare handling some caching, SSL, and DNS. Audit the live site and everything is working great except the “Background Video MP4” would not load on iOS or desktop Safari. The following error was given:
Media error: Format(s) not supported or source(s) not found Download File: https://mysite.com/wp-content/uploads/2020/03/image.mp4
The Solution
Somewhere along the lines the headers in the Cloudflare caching system got mixed up and Safari does not accept mp4 with mixed header data. The best way to get around this is to use the Apache “SetEnvIfNoCase” in .htaccess to rewrite the header variables in the mp4 request so Cloudflare does not mess with it.
Add the following line of code to your .htaccess (located in the root of your WordPress installation):
SetEnvIfNoCase Request_URI .(?:mp4)$ no-gzip dont-vary
The following screenshot is the new complete .htaccess
With the new .htaccess file uploaded to the server we can check the website on mobile Safari to confirm this has fixed our issue!
With the new .htaccess file updated, Cloudlfare is not breaking the background MP4
Hopefully this saves someone out there from headache of hunting down this odd issue!