Display youtube video inline on IOS devices

10
votes

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

3
javascripthtmliosyoutube
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
Ok, but where is the code that you have tried so far – Sourabh Kumar Sharma

3 Answers

23
votes

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.

3
votes

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.

1
votes

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.