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

Video autoplay handling

Your videos in a lot of browsers won't autoplay, because it is not allowed in them!

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

Autoplay with sound

Browsers, especially on mobile do not allow videos from autoplaying with sound, as an autoplaying video can create a negative experience.

If you want your video to play with sound turn off the autoplay and let the visitor decide whether they want the video to play. Lightboxes don't have muting options, so they need to be started manually by the user.

Background videos can never play if they're not muted. So if you want a video with sound, you must use a video layer with the autoplay turned off.

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.

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.

User settings

All browsers have options to turn off video autoplaying, so to not allow any videos to automatically play at any circumstances. If you don't think you should have a browser/device given limitation, then it will be a setting within your browser (or within the device's settings).

Large filesize

Due to the common usage of mobile Internet some browsers, especially on iOS will not load autoplaying videos if their file size is large.

Make sure you optimize your video properly and keep the file size around 5Mb maximum.

IOS devices (all browsers)

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

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.)

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.

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.

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.

Localhost/staging websites

Youtube does seem to detect staging/localhost websites, where they aren't so strict about their limitations. For example a Youtube video could autoplay, even with sound. But on a live website your video still cannot autoplay with sound. So this is normal, that you are seeing a different behavior at your staging/localhost website, while on the live website the 1st mentioned limitation still happens.

☝️ 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.

Autoplay test

Autoplaying videos has a ton of limitations and in a lot of browsers your video just won't autoplay, because the browser or device does not allows it. Here you can find:

example, which have autoplay codes. If a video (or all of them) here doesn't play for you, it means your have one of the listed limitations!

How to debug why videos aren't autoplaying for you?

Check out the Autoplay test. This can show you whether you have a browser/device given limitation, or if the problem only happens on your website.
If the problem only happens on your website:
- Use the Export Slider as HTML option.
- Create a folder on your FTP, for example: /slider
- Upload the unzipped files and folders into this folder.
- In the browser, where you saw the autoplay issue, take a look at the url: https://yourwebsite.com/slide
  
  This test can show whether your problem happens even when you are seeing the slider's codes and nothing else, or if the problem only happens on your website, due to a 3rd party code.
If the problem only happens on your website, do a theme/plugin conflict test and address the issue at the source of the problem.
If the problem happens on the HTML exported slider page too, contact us with this information:
- Send us a link to your HTML export.
- Tell us what is the operation system of your device, also what is the version number of the given operation system.
- Tell us what browser are you using (Safari, Chrome or other).

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:

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.