CODEWITHSUNDEEP
androidhtmlcssvideobackground
Assim
Assim

Reputation: 17

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: 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

Upvotes: 1

Views: 2157

Answers (1)

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

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();

Upvotes: 1

Related Questions