10

I am trying to build a small web app which requires playing a youtube video behind some text.

I tried using the youtube Iframe api 'playsinline' parameter, but it won't work and display videos in fullscreen on IPhones.

Any suggestions?

Thanks.


UPDATE

Since IOS 10 came out html5 video tag inline attribute is supported on safari and youtube videos can be played inline, and thus @David Anderton answer is marked correct.

https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12

Hope it helps

2
  • actually FWIW when doing it with uiwebview i set mediaPlaybackRequiresUserAction to YES and that stopped it auto launching. perhaps you have something similar available in your html version
    – myte
    Oct 27, 2015 at 12:11
  • Ok, but where is the code that you have tried so far Oct 27, 2015 at 12:56

3 Answers 3

24

Add playsinline=1 paramerer to the embed url. Add ? or & before as appropriate; ? if the only paramerter, & to concatenate with other params.

Example:

<iframe
  src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>

From YouTube iFrame Player API:

This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are: 0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change. 1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.

1
  • I have found that this also works directly on a video tag and that it works with any string value that does not evaluate to a boolean, such as true <video playsinline="playinline" ..../>
    – Carlene
    Mar 14, 2019 at 15:06
3

You can't play videos inline in the browser on iOS. If its a hybrid app(that is using a webview), then while instantiating the webview you can set the allowsInlineMediaPlayback and the video tag in the HTML should have the "webkit-playsinline" attribute.

4
  • No way of doing so in a pure web app?
    – straiker2
    Oct 27, 2015 at 12:13
  • 1
    You can add "webkit-playsinline" attribute to the video tag. It will play inline on iPad, but not iPhones. No way to play video inline in the browser on iPhones.
    – Shreyas
    Oct 27, 2015 at 12:20
  • It's already possible on iPhones, as long as the iframe has the webkit-playsinline attribute. The src should also have the parameter enablejsapi=1, as mentioned in the documentation. If you're using a WebView, also set allowsInlineMediaPlayback to true.
    – Rygen
    Dec 24, 2016 at 0:45
  • This comment is no longer accurate as of iOS 10; see the accepted answer stackoverflow.com/a/40961655/303896
    – alxndr
    Jun 9, 2017 at 23:02
1

First set allowsInlineMediaPlayback and mediaPlaybackRequiresUserAction to true.

Then check your iFrame HTML:

<html><body style='margin:0px;padding:0px;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>function onYouTubeIframeAPIReady(){ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}function onPlayerReady(a){a.target.playVideo();}</script><iframe id='playerId' type='text/html' width='640' height='480' src='http://www.youtube.com/embed/5_ofy9Ae87M?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>

Note playsinline=1 and autoplay=1 in the HTML.

1
  • Hi, Sorry if I wasn't clear but I am not using webview. it's not a native app. maybe you have a workaround?
    – straiker2
    Nov 6, 2015 at 7:02

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.