Display youtube video inline on IOS devices

Question

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

Answer 1

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.