1

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: www.jossefbn.com/test

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>	 
</video>

Here's screenshot evidence of the problem:

Android screenshot

The website is totally responsive. Here's a direct link for the CSS layout file: www.jossefbn.com/test/css/layout.css

1 Answer 1

1

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:

document.querySelector('#video_background').play();
1
  • Thanks a lot, I didn't know that.
    – Assim
    Sep 23, 2015 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.