Skip to main content

Why do my videos play on desktop but not on iPhone?

A self-hosted video that plays on a computer but shows an empty box or a dead play button on iPhone is almost always down to how the video is set up in the page, not the server. Here's how to recognise it and fix it.

Written by Daniel

Wordify's servers and CDN serve video files to every device. If a video on your site plays on a computer but not on an iPhone, the page is offering the phone something it can't use. This is fixed in WordPress, and the checks below take a few minutes.

What you'll see

On the iPhone, the space where the video should be is empty apart from a play button. Tapping it does nothing, or the page seems to keep loading and the video never appears. On a laptop the same page plays normally. It also plays normally in the mobile view of Chrome's developer tools, which makes it easy to assume the phone is at fault.

How to recognise this problem

Three things point to the page rather than the server:

  • It works on desktop in every browser. If the server were refusing to send the file, it would fail everywhere.

  • The video file plays on the phone by itself. Copy the file's address (it ends in .mp4) into Safari on the phone. If it plays there, the phone, the server, and the CDN are all fine, and the problem is in the page.

  • There's nothing in your site's logs. The browser decides not to play the file before it asks for it, so the server never sees a failed request.

The usual cause: the video is in the wrong field

When you add a self-hosted video, your page builder writes a video tag that lists the file along with a label saying what format it is. The label matters more than the file name. Browsers use it to decide whether to try the file at all, and the HTML standard lets them skip anything labelled as a format they can't play.

In Divi's Video module there are two fields: Video MP4 File Or Youtube URL and Video WEBM File. If the MP4 is entered in the WebM field, Divi labels it as WebM. Chrome on a desktop ignores the label, works out the real format from the file, and plays it. Safari and Firefox on iPhone don't. In our testing the video only came back once the file was in the MP4 field.

The same applies to any builder or plugin with separate MP4 and WebM fields: the MP4 field is the one that has to be filled in.

How to fix it in Divi

  1. Open the page in the Divi Builder and open the Video module's settings.

  2. On the Content tab, look at the Video section. If the file is only in Video WEBM File, copy its URL.

  3. Paste the URL into Video MP4 File Or Youtube URL.

  4. Clear the Video WEBM File field unless you have a real .webm version of the video.

  5. Save the module and the page.

  6. If the page has separate desktop and phone copies of the module (a common way to lay a page out differently on mobile), repeat this for each copy. The copy hidden on desktop is the one the phone shows.

  7. Clear your site's cache from the Wordify Console, then test on the phone.

[Screenshot: Divi Video module, Content tab, with the MP4 field filled in]

Why there's no thumbnail on iPhone

Even with the file in the right field, iPhone shows an empty box with a play button until you tap it. Safari on iOS doesn't load video ahead of time, so it has no first frame to show. Apple's own guidance is to set a poster image. On a desktop the browser downloads enough of the video to show the first frame, which is why the page looks different there.

In Divi this is the Overlay Image setting in the Video module. The Generate From Video button beside it only works for YouTube and Vimeo links, because it asks the video service for its thumbnail. For a file uploaded to your media library it spins and then leaves the field empty, with no error. Upload a still instead:

  1. Pause the video on a good frame on your computer and take a screenshot, or export a frame from your video editor. Match the video's orientation.

  2. Upload the image to your media library.

  3. In the Video module, open the Content tab, then Overlay, and choose the image under Overlay Image. Set it on the desktop tab so it applies on every device.

  4. Repeat for each copy of the module, save, and clear the cache.

[Screenshot: Overlay section with an image set]

Other things that stop a video playing on phones

  • The file is HEVC (H.265). Phones can record in this format, and Chrome and Firefox only play it on devices with hardware support. Export the video as H.264 MP4, which every current browser plays. On iPhone, Settings, Camera, Formats, Most Compatible records H.264 from then on.

  • A large file with its index at the end. MP4 files carry an index the browser needs before it can start, and some editors put it at the end of the file, so the phone has to download everything first. In HandBrake, tick Web Optimized. With ffmpeg, add -movflags +faststart.

  • You tested in a desktop browser's mobile view. Chrome's device mode changes the screen size and the browser's name, not the engine that plays video. Google's own documentation calls it a first-order approximation and recommends running the page on a real device.

Does Wordify affect this?

No. Our servers and CDN send video files in chunks on request, which is how phones fetch video, and we don't change the video tags in your pages. Which file a phone is offered, and how it's labelled, is decided by your page builder, which is why this is fixed in your WordPress dashboard rather than by us.

Need help?

If a video still won't play after the steps above, get in touch and we'll take a look. It helps if you send us the page address, the phone model and browser, and a screenshot of what you see. We respond within an hour.

Did this answer your question?