Wordpress video autoplay not working on mobile

Video issues (autoplay not working, video player looks different)

In this article

  • Video autoplay handling
  • Video slider and Slider autoplay
  • Video doesn't look the way it should be
  • Can't swipe over video, youtube or vimeo layer

Video autoplay handling

Autoplaying videos is quite a complicated issue, as many browsers are fighting against it, because it can be used to create a bad user experience. In this documentation you can see reasons and our actions towards them.

Any limitation which is about blocking the videos because they try to autoplay with sound affects the audio layer as well!

Known limitations

1
Older tablet and mobile devices

Older mobile devices and tablets have a limitation, that you can't autoplay videos on them, because of the common usage of mobile internet, and the memory available on them. On these devices only a user's action can start a video, so touching the play button on the video.

2
Newer tablet and mobile devices

Some of the newer devices have the previously written limitation too, but the standard rather became, that a video can autoplay if the video is muted.

But all browsers on these devices have options to disable video autoplaying and then your video won't autoplay, not even muted.

3
Chrome on all devices (desktop computers too) and some other browsers start to take this behavior too

Chrome with its latest versions also limited down videos, that they can only autoplay if the video is muted. This is just one of their limitations. The other one is, that a video can only start if the user had interaction with your website, meaning he clicked anywhere on it. Because of this we modified our code too, to start the video, if the user clicks anywhere on your page, as this is the best we could do and there are no workarounds.

See the official announcement.

4
Firefox on desktop (probably mobile and tablet as well)

Firefox automatically blocks any video which plays with sound, even on YouTube's site. Currently there's no workaround for this, so if you want your video to play automatically, it must be muted.

Lightboxes don't have muting options, so they need to be started manually by the user.

5
IOS devices (all browsers)

When your phone is in " Low Power Mode" then no video autoplay can be started without user interaction, even if the videos are muted.

6
YouTube videos on iOS devices

YouTube had limited down its videos and they won't allow to autoplay them on iOS phones and tablets anymore. Also, the volume control might be missing completely regardless of your settings. (This part is coming directly from YouTube so we have zero control over it.)

7
Xiaomi MIUI browser

Xiaomi's built in MIUI browser opens up all videos inside a popup video player, as you see for example in this video to let users do anything else on their phones while watching the given video. This behavior cannot be changed within the video's code.

Note: Browser limitations can also apply when you have a cover image on the video. In this case, it's not the actual video the user has interacted with, but an image element. The video itself is started by JavaScript codes, exactly like it would without using the cover image. Browsers currently can't always tell the difference, so the user might need to start the video.

The same goes for lightboxes. The video inside the lightbox is started using JavaScript, and the user has not interacted with the video directly yet, so the browser might prevent the autoplay.

What can you do to avoid having a not playing video on your slider?

1
Layers

If you are using layers, then always leave the Controls option on, so the user could start the video if he wants to. Also change their Volume to muted if you want them to autoplay where they can.

2
Background video

Pick a background image too. The way our system works is, that the background image will be on top and the image will disappear, if the video can start playing.

Video slider and Slider autoplay

When you create a video slider where your videos play automatically and even the slider has the autoplay enabled, you might end up with a few questions on the setup or behavior.

1
The slider autoplay doesn't start

This problem can happen, when at the slider autoplay the Stop on media option is turned on, and you enabled the Loop at the video layer. You should either disable the loop, or turn off the Stop on media.

2
The next slide doesn't come right after the video finished playing

If the Stop on media and Resume on media is turned on at the slider autoplay the Slider autoplay pauses while the video plays. The image below can help understanding it better:

Wordpress video autoplay not working on mobile

Solution

You can solve this problem in two ways:

  • Turn off the Stop on media at the slider autoplay
  • Go to your video layer and change the When ended to Go to next slide. This option is only available when the Loop is disabled!

Video doesn't look the way it should be

There are codes, which are modifying how videos can look like on websites. If you right click on your website, choose "View page source", search for the word "mejs". If you see that, you have mediaelement js in your website, and that is causing your problem. This can be added by a lot of things, but here are two common ones:

  • In the admin area go to the Components Widgetkit Media player, and change the Enable value to No.
  • The other possible cause is, that in the admin area go to the Extensions Manage Manage, where the System - WF MediaElement had to be unpublished.

Can't swipe over video, YouTube or Vimeo layer

We can either take control over the screen on the slides or not. When you put down a video, youtube or vimeo layer, it has actions on it, like pausing, playing the video either just touching the video, or it's controls, also at the controls there is the volume and other parts. To let you touch these, we have to let the video, youtube or vimeo layer to be in control, so every touching action happening over them is handled by them.
If you rather want swipe, and don't care about touching the video or just parts of it, then put down a transparent area layer over your video, and that can be swiped.