CODEWITHSUNDEEP
javascripthtmliosyoutube
straiker2
straiker2

Reputation: 165

Display youtube video inline on IOS devices

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

Upvotes: 10

Views: 27407

Answers (3)

David
David

Reputation: 3194

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.

Upvotes: 24

user5527177
user5527177

Reputation:

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.

Upvotes: 1

Shreyas
Shreyas

Reputation: 1462

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.

Upvotes: 3

Related Questions