👋 Sydnee Client Portals has officially launched!

SOLVED: Divi MP4 “Media Error: Format Not Supported”

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.3WordPress 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!

Connor Bearse

Connor Bearse

I am the founder and head of Sydnee. I also run a marketing agency. When I'm not working with the team or building Sydnee you'll find me at the skatepark.

Use Sydnee Client Portals For

Branded File Sharing

Upload images, documents, videos, and any other file to share with your client. Search, sort, and mark files as starred. Grab a branded link or utilize the built in file browser.

Unify All Your Digital Tools

Integrate your existing tools into Sydnee for easy client access. We support Calendly, Airtable, Asana, Vimeo, YouTube, ClickUp and more!

Z

Better Client Boundaries

Toggle your services as active or inactive with a simple checkbox. Ensure your clients see what they’re enjoying now and the potential services they can explore.

One Click Client Access

Generate a magic link for your clients to access. No need to burden your clients with another account for them to access your portal.

Owning Your Brand

Sydnee does not stick our logo onto any of your portals. Connecting your own domain, set your own colors, and using your own logos comes standard.