Assim Assim - 1 year ago 63
CSS Question

HTML Embeded Video Background can't load on Android or IOS

My client's website background video doesn't load on mobile (neither Android nor iOS), and yet it works fine on desktop/PC.

The website:

Direct videos links :

Here's the piece of code that I'm using:

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="">
<source src="videos/video-1.webm" type="video/webm">
<source src="videos/video-1.mp4" type="video/mp4">
<source src="videos/video-1.ogg" type="video/ogg">
<p>Your browser does not support the video element. Try this page in a modern browser!</p>

Here's screenshot evidence of the problem:

Android screenshot

The website is totally responsive. Here's a direct link for the CSS layout file:

Answer Source

Video and audio can't autoplay in mobile devices. You need some kind of user interaction to start playing it (click).

You could show only first frame of the video on mobile devices (poster attribute) and put play button on it. Then start video using javascript: