Background Video Does Not Play On Mobile?

I've made a landing page where video plays at the background of a form. It's working fine on desktops but I checked on my Android device using Chrome, the background video does not

Solution 1:

You need a couple more attributes for your video element

<video autoplay loop muted playsinline id="video-background" poster="images/poster.jpg">

Safari and Chrome for mobile made changes on how video on mobile acts. By default, it can only autoplay when the video is muted. But for webkit/iOs you also need a second attribute; playsinline. This attribute makes it so that it plays inline, rather than jumping to fullscreen video.

Also make sure your mobile devices are not running in Low Power Mode if you’re targeting iOS 11. If you’re on Chrome For Android, Data Saver mode will also prevent auto play and thus won't show the video. There's not anyway around this.

Solution 2:

CSS:

#section-video video {
   display: block; 
}

give the diplay block instead of none in the corresponding css file.

Solution 3:

You should have a look on this kind of jQuery plugin.

Otherwise, instead of only having a .mp4 format, you should provide some .webm and .ogv formats alternatives as well to have a better compatibility over browsers and devices. You should also have a "fallback" image like the poster="videos/poster.png" in the following example. In case none of those format would works with the used browser / platform, this image is displayed instead of the video.

You will have to convert your video into .webm and .ogv.

As I'm still myself looking for a good converting tool (no extra ugly banner after the convert and stuff), I couldn't give you some advice about this.

<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="http://www.mygreencity.in/Enquiry.mp4" type="video/mp4"/>
    <source src="http://www.mygreencity.in/Enquiry.webm" type="video/webm"/>
    <source src="http://www.mygreencity.in/Enquiry.ogv" type="video/ogg"/>    
</video>

Good Luck'