"webkit-playsinline" video tag attribute

Question

The <video> tag attribute webkit-playsinline supposedly prevents the default go to fullscreen behavior of HTML5 videos.

I added this attribute to my video tag and checked mobile safari and chrome on iOS6 iPhone and it doesn't work. The video still goes fullscreen. This is similar to others' experiences as described on SO two years ago.

What mobile browsers as of today, June 13th, 2013 does this attribute webkit-playsinline work?

Seen this? http://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android — dsgriffin, Jun 13 '13 at 15:27
@Zenith thanks, yes but that Q&A is over 2 years old. Was wondering on people's experiences since this time. I will add the link to the question though. — tim peterson, Jun 13 '13 at 15:29
No worries, but everywhere I've seen it used have involved both a native iOS app and HTML5 unfortunately.. — dsgriffin, Jun 13 '13 at 15:31
@Zenith yeah UIWebView still seems to be only place this works. — tim peterson, Jun 13 '13 at 15:41

fregante · Answer 1 · 2016-09-20T15:58:53.553

42

Apple has finally enabled the playsinline attribute on iOS 10, so this will work:

<video src="file.mp4" playsinline>

I wrote a polyfill called iphone-inline-video that adds the same behavior to iOS 8 and 9.

edited Sep 20 '16 at 15:58

answered Jun 22 '16 at 12:15

fregante

29,050
14
119
159

5

In React, this is `playsInline`, similar to other attributes. – Matthew Ratzloff Jan 03 '19 at 20:56

score 17 · Answer 2 · answered Jul 25 '13 at 19:19

17

The webkit-playsinline attribute works for HTML5 video on iOS4+ but only when you save the webpage to your home screen as a webapp. If you are using mobile Safari it will always open fullscreen.

Theres a small blurb about its support here: http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html

I've also seen on recent versions of Android that inline video playback does work within its native browser.

answered Jul 25 '13 at 19:19

blacktooth

171
4

1

-@blacktooth, can you mention specific versions of Android that you found it to work? – tim peterson Dec 30 '13 at 18:19
How do we save it as a web app on an iPhone ? – code-8 Dec 16 '15 at 23:10
@ihue: Save the URL to homescreen and start it from there. However, webkit-playsinline doesn't work then either as far as I can say. – Sir Hackalot Jan 19 '16 at 10:46

moloko · Answer 3 · 2016-06-20T16:49:30.307

7

Looks like this might finally get implemented properly in iOS 10

edited Jun 20 '16 at 16:49

answered Jun 20 '16 at 16:43

moloko

423
4
8

score 3 · Answer 4 · edited Oct 26 '16 at 08:22

3

This worked for me. I tried to use playsinline inside of video tag. But it didn't work so I tried to set attribute from jQuery

$('#you video tag id').attr('playsinline','');

edited Oct 26 '16 at 08:22

noufalcep

3,446
15
33
51

answered Oct 26 '16 at 06:16

Shanaka Nuwan

175
9

"webkit-playsinline" video tag attribute

4 Answers4

Linked