Video issues (autoplay not working, video player looks different)
In this article
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.
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.
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.
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).
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.
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.
What can you do to avoid having a not playing video on your slider?
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.
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.
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.
The slider autoplay doesn't start
This problem can happen, when at the slider autoplay the
Stop on mediaoption is turned on, and you enabled the
Loopat the video layer. You should either disable the loop, or turn off the
Stop on media.
The next slide doesn't come right after the video finished playing
Stop on mediaand
Resume on mediais turned on at the slider autoplay the Slider autoplay pauses while the video plays. The image below can help understanding it better:
You can solve this problem in two ways:
- Turn off the
Stop on mediaat the slider autoplay
- Go to your video layer and change the
Go to next slide. This option is only available when the
- Turn off the
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
- The other possible cause is, that in the admin area go to the Extensions → Manage → Manage, where the
System - WF MediaElementhad to be unpublished.