HTML5 Video autoplay now working on mobile?

Hi,

I’ve been looking into how to implement HTML5 videos as a background video on mobile. Previously I thought it was impossible due to OS limitations, however I’ve found it being used on quite a few websites now (They aren’t GIFS as far as I can tell) and was wondering if anyone had any advice on how I could achieve this?

Here’s an example,


Here is my public share link: LINK
(how to access public share link)

1 Like

Apparently you only need the playsinline attribute…

I have a working example with just that code:

http://vincent.polenordstudio.fr/snap/3w7kq.jpg

At least on iPhone / IOS10

<video playsinline autoplay loop muted style="min-width:100%; min-height:100%;" >
 	<source type="video/mp4" src="//bg.cdn.ustudio.com/app/transcodes/TQAdh6DJdtuY.mp4">
 	<source type="video/webm" src="//bg.cdn.ustudio.com/app/transcodes/TuX1xml2yZsS.webm">
</video>

EDIT: Ok so neither theweeknd.com nor my example work on Android. So i suspect this method only works for iOS10. Maybe also on very modern Androids handsets and browsers…

EDIT2: I confirm all of the above

6 Likes

That’s absolutely incredible, thank you so much for your quick help Vincent! Unfortunately I don’t have an android device to test this on, but do you know if I’ll need to supply a fall back image for older android devices?

iOS relaxed their restrictions. If the video doesn’t have sound, it CAN be autoplayed inline.

1 Like

I have tested it on many android devices now, so I can say it’s not working at all on Android. Only iOS10 Safari.

So yes you need to provide a fallback for all the rest.

Oh ok, so the mutedattribute isn’t even needed. Makes sense.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

FYI: we add playsinline to our built-in background video component: no custom code needed! Republish exiting sites to see the added attribute.

5 Likes