Problems with video background

[Minna]

I went through several other topics on the issue, but couldn’t find a solution. So I wish you could help me out.

I added a video background to my site on the landing page (video file in mp4 codec H.264). It works fine atleast on Chrome on desktop, but not on Safari or mobile devices (tested with both Android and iPhone). I understood that on some mobile devices the video background might not work no matter what, but is there other options to have the same outcome, maybe some plugin, a video slider or something? I’d really appreciate any help as I really hope to learn to make video backgrounds.

The poster image also shows up on top of the video for a brief moment before the video starts, what am I doing wrong there? Would be nice if it’s only a fallback image and wouldn’t show at all on the start.

[tristup]

Hi @MinnaKulmala,

Thanks for reaching out.
Background videos especially in iOS Safari browser are disabled on mobile, but it plays well in the Chrome browser on Android devices. There are other ways to make that possible but that would mean slowing down your page and it’s outside the scope of our theme support as it would require custom development.
I would suggest you go through the following thread on this.

Playsinline tag on video

Will add as secure note.

NOTE: I have tried to check your website but it required login, and the given credentials are not working. I would suggest you specify the Username and Password specifically.

Thanks

[Minna]

I fixed the login credentials, sorry for that. The video won’t show up on Chrome brower on my Android device either. I tried this JS code from that thread and it didn’t solve the issue on Safari browser.

(function($){
$(’#my-video’).attr(‘controls’);
$(’#my-video’).trigger(‘play’);
})(jQuery);

[ruenel]

Hello Puska,

Can you please rename your video filename from litebike-e-bike-sähkömoottoripyörä.mp4 into something else like litebike-e-bike-some-english-name.mp4.

You may need to use HandBrake (https://handbrake.fr/) and convert your video again. The current format may not be a cross-browser compatible.

Best Regards.

[Minna]

thank you, there was something wrong with the file type and converting it again fixed the issue

However it still doesn’t show up on iOS mobile devices and the JS code from this thread doesn’t work for me. Playsinline tag on video

[tristup]

Hi @MinnaKulmala,

Glad that it resolved in other devices, and as I said before there is a restriction on Background Videos especially in iOS Safari browser are disabled on mobile.

Thanks