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.
Known limitations
1Older tablet and mobile devicesOlder 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.
2Newer tablet and mobile devicesSome 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.
3Chrome on all devices [desktop computers too] and some other browsers start to take this behavior tooChrome 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.
4Firefox 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.
5IOS 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.
6YouTube videos on iOS devicesYouTube 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'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?
1LayersIf 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.
2Background videoPick 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.
1The slider autoplay doesn't startThis 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.
2The next slide doesn't come right after the video finished playingIf 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:
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.