HTML5 Video autoplay now working on mobile?

Design help Custom code
1

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
2

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
3

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?

4

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

1 Like
5

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.

6

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

7

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

8

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