Not working on Mobile devices?

[AlexanderElert]

[RichardAtWork]

Also having the same issue - doesn't autoplay on iOS (iphone 6) and show the play button (but that appears to be disabled / doesn'twork - known issue? This is from stackoverflow: ), on iPad, the cover image shows with no play button (which is kind of better), on Windows (Lumia) mobile it works perfectly (! I know, who'd have though it !). On Android (Browserstack test) Samsung 6, cover image loads for a second then vanishes, black background remains. Same with Google mobiles. Appreciate any pointers / workarounds...

[rishabhp]

I've updated the code to fix all of this. It might be a bit quirky but try the demo again and let me know whether its any better or not.

[Zundrium]

Sadly, with the new code this issue remains on Google mobiles (only one I checked). Could you tell us what you changed in the code?

Edit: never mind, I guess you can't autoplay videos on Android.

[napathello]

Android have problem get black screen

[Kurosar]

Yep, a little google search will tell you that background videos will not autoplay anymore... that's how it is now and I don't think we can fix it without modding our own custom ROM.

[artbelov]

As a workaround, you can use "fake" play button with "onclick" event:

<div onclick="document.querySelector('#background_video').play()" class="play-button">
  <i class="fa fa-play-circle" aria-hidden="true"></i>
</div>

Temporarily, I hope.

[glaucomorais]

Chrome has an Autoplay Policy that requires user to interact with something in the page (like click or tap) to be able to play the video.

The black screen can be resolved removing the source tag from the video, if any. But, can still fail because the Autoplay Policy. A Promise is returned by the play() method and must be checked for the video cover removal. I already opened an push request: https://github.com/rishabhp/bideo.js/pull/20

[nydame]

By the way, Chrome will not prevent autoplay of videos that are muted. Reference: autoplay policy doc.

[princefishthrower]

For what it's worth, going in and changing the src path to a URL to an optimized CDN or similiar (like Digital Ocean's Spaces was the most optimum for me. From a simple statically served express node server, I was having troubles with a large (8 MB video). On a Digital Ocean Space, the video streams great!

For a splash page I built today using Bideo, I can confirm it works on desktop, an iPhone 5SE, and an old Galaxy II

Also, if you add playsinline to the <video> tag, this will autoplay in mobile (though according to this link https://forum.webflow.com/t/html5-video-autoplay-now-working-on-mobile/40584 it is a pretty new standard, it may not work in some mobiles).

For my project personally I removed the play and pause pictures. Without modifying main.js, you still need to leave the actual div's with the video_controls id and play/pause or else the video won't play at all - certainly this is because of what is going on in main.js or bideo.js, but I just removed the @media (min-width: 768px) line wrapped around the #video_controls in the CSS to hide them.

Whew, long-winded, but I spent a good amount of time hunting down a good solution for every device, and this is what I ended up with.

Hopefully this helps someone in the future!