Custom button to play Videos does not work on mobile

Hi there,

I have a custom button, which I gave some functions using Wix-Code. It hides a strip and starts playing the video that is beneath the strip by using the „play“ function.
You can check out the functionality here:
Now, my problem. Everything works fine in Windows 10 – the overlapping strip hides and the video starts to play. But the play function does not work on mobile devices at all - it starts somehow loading the video, but the video does not play.

Is there a way how to get this running, like it works in Windows also on all other devices and browsers by using a different code?
My code, that works in Windows looks like this:
let fadeOptions = {
“duration” : 500
export function iconButton1_click(event) {
$w( “#videoPlayer1” ).play();
$w( “#columnStrip4” ).hide( “fade” , fadeOptions);

Hope someone can help

For something to work on a certain device only, like Mobile devices only, then you need to be using the Wix Window API and the formFactor function.

You can see examples here.

Also note that with devices some will not autoplay and some will play with no sound.

You may find that your music and videos do not play automatically on iPhones, Androids and tablets.

Note: Due to browser restrictions, videos play on mute when set to autoplay. However, your viewers can turn the sound on whenever they want.

Video backgrounds play without sound too.
*Video backgrounds play without sound. If you want to display a video with sound, we recommend that you use a different element, such as Wix Video, Pro Gallery or the video player. *

Thanks for you quick reply, but this does not solve my problem at all. I do not need different behaviours on different devices but I need the play function to work on ALL devices. It works on PC but it does not work on mobiles, it simply does not paly the VideoPlayer → the video does not start to play.
Sorry if I did not explain my problem clearly.

The first reply covers your issue if you wanted it to only play on a certain device, for example mobile only.

The second reply covers your issue as to why it either does not play or it plays with no sound.

Or you have access to each users own device and you change their own settings for them.

Video Backgrounds on mobile will only show the first frame as well and not the video.

Important: To avoid slow loading times, video page backgrounds do not play on mobile devices. Instead, the first frame of the video is shown.

Note: If Data Saver is enabled in your Chrome settings on your mobile device, the browser prevents videos from playing automatically.

@givemeawhisky Thanks for all of that, which I am fully aware of. But I am not speaking about autoplay, nor video backgrounds. I have a video player on my page which I want to start playing by clicking on a seperate custom button which is outside the video player window. As already said, it works on PC but on mobile the play function does not play the video.


Okay, so first off check the mobile editor and see if the overlapping strip is still shown on the mobile version and it has not been added to the hidden elements on your mobile site.

If the overlapping strip is causing the issue on mobile, then you might just have to write a simple line of code to change what it does on mobile compared to being on desktop.

So on desktop the button click would hide the strip and play the video as you said it does, whereas on mobile you will just need t have the video play and not have the strip hide line as the strip is automatically hidden in the mobile friendly version.

Hi Peter. Did you have any luck fixing this ridiculous issue? My site is also suffering from it despite trying numerous methods I’ve been unable to remedy it.