👋 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

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.

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!

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.

Related Posts

The Power of Client Portals: Everything You Need to Know

"Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family." - Kofi Annan Have you ever wondered how businesses and their clients seamlessly exchange information and collaborate? Let's...

Social Media Client Portal Template

In the bustling realm of social media freelancing, establishing boundaries and optimizing revenue streams becomes as essential as delivering top-notch content. How can you ensure clear lines of communication, while also presenting additional...

[2023] Image Only Emails: Pros, Cons, Strategy, and Examples

A key challenge when it comes to email marketing is being able to translate your branding consistently using an email marketing builder. Wouldn't it be nice if you didn't have to monkey around with an email builder and just send out an image-only...

What Freelancers Should Know About Finances

As a freelancer, you wear many hats – from creative genius to marketing expert. But when it comes to managing your finances, bookkeeping can feel like a daunting task. That's why we've created this comprehensive guide to help you navigate the...

Networking for Freelancers: Building Meaningful Connections

As a freelancer, you might have realized that finding new clients and opportunities can be challenging. Networking is a powerful tool to help you build meaningful connections, boost your business, and grow your client base. In this blog post, we...

Building and Managing Your Freelance Business from Scratch

The dynamic world of freelancing provides an opportunity for individuals to exercise their skills while enjoying the autonomy and flexibility that comes with being your own boss. However, freelancing can also be quite challenging. It requires a...